thelove

Code hiệuu ứng hoa vàng rơi

Jan 14th, 2020
113
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1.  <script type='text/javascript'>
  2. //<![CDATA[
  3. var pictureSrc ="https://i.imgur.com/2Nn0qwz.png"; //Link ảnh hoa muốn hiển thị trên web
  4. var pictureWidth = 15; //Chiều rộng của hoa mai or đào
  5. var pictureHeight = 15; //Chiều cao của hoa mai or đào
  6. var numFlakes = 10; //Số bông hoa xuất hiện cùng một lúc trên trang web
  7. var downSpeed = 0.01; //Tốc độ rơi của hoa
  8. var lrFlakes = 10; //Tốc độ các bông hoa giao động từ bên trai sang bên phải và ngược lại
  9.  
  10.  
  11. if( typeof( numFlakes ) != 'number' || Math.round( numFlakes ) != numFlakes || numFlakes < 1 ) { numFlakes = 10; }
  12.  
  13. //draw the snowflakes
  14. for( var x = 0; x < numFlakes; x++ ) {
  15. if( document.layers ) { //releave NS4 bug
  16. document.write('<layer id="snFlkDiv'+x+'"><imgsrc="'+pictureSrc+'" height="'+pictureHeight+'"width="'+pictureWidth+'" alt="*" border="0"></layer>');
  17. } else {
  18. document.write('<div style="position:absolute; z-index:9999;"id="snFlkDiv'+x+'"><img src="'+pictureSrc+'"height="'+pictureHeight+'" width="'+pictureWidth+'" alt="*"border="0"></div>');
  19. }
  20. }
  21.  
  22. //calculate initial positions (in portions of browser window size)
  23. var xcoords = new Array(), ycoords = new Array(), snFlkTemp;
  24. for( var x = 0; x < numFlakes; x++ ) {
  25. xcoords[x] = ( x + 1 ) / ( numFlakes + 1 );
  26. do { snFlkTemp = Math.round( ( numFlakes - 1 ) * Math.random() );
  27. } while( typeof( ycoords[snFlkTemp] ) == 'number' );
  28. ycoords[snFlkTemp] = x / numFlakes;
  29. }
  30.  
  31. //now animate
  32. function flakeFall() {
  33. if( !getRefToDivNest('snFlkDiv0') ) { return; }
  34. var scrWidth = 0, scrHeight = 0, scrollHeight = 0, scrollWidth = 0;
  35. //find screen settings for all variations. doing this every time allows for resizing and scrolling
  36. if( typeof( window.innerWidth ) == 'number' ) { scrWidth = window.innerWidth; scrHeight = window.innerHeight; } else {
  37. if( document.documentElement && (document.documentElement.clientWidth ||document.documentElement.clientHeight ) ) {
  38. scrWidth = document.documentElement.clientWidth; scrHeight = document.documentElement.clientHeight; } else {
  39. if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
  40. scrWidth = document.body.clientWidth; scrHeight = document.body.clientHeight; } } }
  41. if( typeof( window.pageYOffset ) == 'number' ) { scrollHeight = pageYOffset; scrollWidth = pageXOffset; } else {
  42. if( document.body && ( document.body.scrollLeft ||document.body.scrollTop ) ) { scrollHeight = document.body.scrollTop;scrollWidth = document.body.scrollLeft; } else {
  43. if(document.documentElement && (document.documentElement.scrollLeft ||document.documentElement.scrollTop ) ) { scrollHeight =document.documentElement.scrollTop; scrollWidth =document.documentElement.scrollLeft; } }
  44. }
  45. //move the snowflakes to their new position
  46. for( var x = 0; x < numFlakes; x++ ) {
  47. if( ycoords[x] * scrHeight > scrHeight - pictureHeight ) { ycoords[x] = 0; }
  48. var divRef = getRefToDivNest('snFlkDiv'+x); if( !divRef ) { return; }
  49. if( divRef.style ) { divRef = divRef.style; } var oPix = document.childNodes ? 'px' : 0;
  50. divRef.top = ( Math.round( ycoords[x] * scrHeight ) + scrollHeight ) + oPix;
  51. divRef.left = ( Math.round( ( ( xcoords[x] * scrWidth ) - (pictureWidth / 2 ) ) + ( ( scrWidth / ( ( numFlakes + 1 ) * 4 ) ) * (Math.sin( lrFlakes * ycoords[x] ) - Math.sin( 3 * lrFlakes * ycoords[x]) ) ) ) + scrollWidth ) + oPix;
  52. ycoords[x] += downSpeed;
  53. }
  54. }
  55.  
  56. //DHTML handlers
  57. function getRefToDivNest(divName) {
  58. if( document.layers ) { return document.layers[divName]; } //NS4
  59. if( document[divName] ) { return document[divName]; } //NS4 also
  60. if( document.getElementById ) { return document.getElementById(divName); } //DOM (IE5+, NS6+, Mozilla0.9+, Opera)
  61. if( document.all ) { return document.all[divName]; } //Proprietary DOM - IE4
  62. return false;
  63. }
  64.  
  65. window.setInterval('flakeFall();',100);
  66. //]]>
  67. </script>
RAW Paste Data