没有雪的冬天失去了冬天的美景,不见了千里冰封,万里雪飘的北国之美,诗人无从写雪,画家画不出雪景,摄影师拍不到冬天的美丽。雪，是冬天的灵魂，为大地铺好背景，之后发生的都如梦似幻，就像童话般的存在。冬天没有雪，能难倒程序猿吗，没有雪自己造，这篇文章主要介绍了JavaScript实现雪花飘落效果特效,需要的朋友可以参考下
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> body { background-color: #000; /*防止出现向下滚动条*/ overflow: hidden; } </style> </head> <body> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script> <script> function snow() { //1、定义一片雪花模板 var flake = $("<div>").css({ "position": "absolute", "color": "#fff" }).html("?"); //获取页面的宽度，利用这个数来算出，雪花开始时left的值 var documentWidth = $(document).width(); //获取页面的高度 相当于雪花下落结束时Y轴的位置 var documentHieght = $(document).height(); //定义生成一片雪花的毫秒数 var millisec = 100; //2、设置第一个定时器，周期性定时器，每隔一段时间（millisec）生成一片雪花； setInterval(function() { //随机生成雪花下落 开始 时left的值，相当于开始时X轴的位置 var startLeft = Math.random() * documentWidth; //随机生成雪花下落 结束 时left的值，相当于结束时X轴的位置 var endLeft = Math.random() * documentWidth; //随机生成雪花大小 var flakeSize = 5 + 20 * Math.random(); //随机生成雪花下落持续时间 var durationTime = 4000 + 7000 * Math.random(); //随机生成雪花下落 开始 时的透明度 var startOpacity = 0.7 + 0.3 * Math.random(); //随机生成雪花下落 结束 时的透明度 var endOpacity = 0.2 + 0.2 * Math.random(); //3、克隆一个雪花模板,定义雪花的初始样式，拼接到页面中 flake.clone().appendTo($("body")).css({ "left": startLeft, "opacity": startOpacity, "font-size": flakeSize, "top": "-25px", }).animate({ //执行动画 "left": endLeft, "opacity": endOpacity, "top": documentHieght }, durationTime, function() { //4、当雪花落下后，删除雪花。 $(this).remove(); }); }, millisec); }; snow(); </script> </body> </html> |
