javascript实现雪花飘落效果

最新推荐文章于 2024-07-18 14:14:43 发布

置顶旺仔520

最新推荐文章于 2024-07-18 14:14:43 发布

阅读量5.3k

点赞数 4

分类专栏： jq js 文章标签：动画前端

本文链接：https://blog.csdn.net/wangxs520/article/details/78842472

版权

js 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

3 篇文章 1 订阅

订阅专栏

作者：旺仔

圣诞节快到了相信许多公司的前端都在会收到一个需求，那就是做一个关于圣诞节的专题，而这个专题为了应对圣诞节这个主题都会加上雪花飘呀飘这个小动画，当然我们公司也不例外，下面就是本人用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的一些基础知识点做出来的，主要是随机数和一些判断。就这么简单。代码不是重点，重点是思维，有了思维你自然就可以做出来了。下面是效果图：