javascript实现雪花飘落效果_JavaScript

javascript实现雪花飘落效果

2021-08-26 15:41旺仔520 JavaScript

这篇文章主要为大家详细介绍了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="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>