javascript实现雪花飘落效果
圣诞节快到了相信许多公司的前端都在会收到一个需求，那就是做一个关于圣诞节的专题，而这个专题为了应对圣诞节这个主题都会加上雪花飘呀飘这个小动画，当然我们公司也不例外，下面就是本人用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='https://www.haobala.com/bcjs/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的一些基础知识点做出来的，主要是随机数和一些判断。就这么简单。代码不是重点，重点是思维，有了思维你自然就可以做出来了。下面是效果图：
想看动态效果的自己复制代码运行就可以了。欢迎给优化建议。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持好吧啦网。
相关文章：
1. JavaScript避免嵌套代码浅析2. CSS Hack大全-教你如何区分出IE6-IE10、FireFox、Chrome、Opera3. 在 XSL/XSLT 中实现随机排序4. 《CSS3实战》笔记--渐变设计（一)5. asp(vbs)Rs.Open和Conn.Execute的详解和区别及&H0001的说明6. XML在语音合成中的应用7. CSS3实例分享之多重背景的实现(Multiple backgrounds)8. Vue Element UI 表单自定义校验规则及使用9. 用css截取字符的几种方法详解（css排版隐藏溢出文本）10. chatGPT教我写compose函数的详细过程
网公网安备