javascript实现雪花飘落效果

时间：2021-05-26

圣诞节快到了相信许多公司的前端都在会收到一个需求，那就是做一个关于圣诞节的专题，而这个专题为了应对圣诞节这个主题都会加上雪花飘呀飘这个小动画，当然我们公司也不例外，下面就是本人用js写的一小段雪花秀啦：

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"> <script src="jquery-1.8.3.min.js"></script> </head> <style> html{ max-width: 720px; } body{ width: 100%; height: 100%; margin: 0 auto; overflow-x: hidden; } .snow{ width: 100%; height: 100%; background: pink; overflow: hidden; } .snow_img{ position: absolute; top: -50px; margin-left: 1px; } </style> <body> <div class="snow"></div> <script> $(function(){ $('body').css("height",$(window).height()) var wid=$(".snow").width(); var html_snow="<img src='snow.png' class='snow_img'>"; setInterval(function(){$(".snow").append(html_snow);snowFlow();},100); function snowFlow(){ $(".snow_img").each(function(index){ var snow_time=(Math.random()*10+4)*1000; var wid_snow=Math.floor(Math.random()*40+5)+'px'; var float_left=Math.random()*wid*2-wid+"px"; var wid_left=Math.random()*wid+"px"; if( $(this).css("margin-left")==1+"px"){ $(this).css("margin-left",wid_left); } if($(this).width()==0 || $(this).width()==50 ){ $(this).width(wid_snow); } $(this).animate({top:800+"px",left:float_left,},snow_time); if($(this).offset().top==800){ $(this).remove(); } }) } }); </script> </body></html>

代码很简单，都是运动用js的一些基础知识点做出来的，主要是随机数和一些判断。就这么简单。代码不是重点，重点是思维，有了思维你自然就可以做出来了。下面是效果图：

想看动态效果的自己复制代码运行就可以了。欢迎给优化建议。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章