码迷,mamicode.com
首页 > Web开发 > 详细

下雪的js代码

时间:2018-12-12 12:53:55      阅读:156      评论:0      收藏:0      [点我收藏+]

标签:meta   lower   char   body   dde   val   creates   back   The   

 

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>下雪效果</title>
	<script type="text/javascript" language="javascript">
	(function(){
		function k(a,b,c){
			if(a.addEventListener){
				a.addEventListener(b,c,false);
			}
			else{
				a.attachEvent&&a.attachEvent("on"+b,c)}
			}

		function g(a){
			if(typeof window.onload!="function"){
				window.onload=a;
			}
			else{
				var b=window.onload;
				window.onload=function(){
					b();
					a();
				}
			}
			}

		function h(){
			var a={};
			for(type in{Top:"",Left:""}){
				var b=type=="Top"?"Y":"X";
				if(typeof window["page"+b+"Offset"]!="undefined"){
					a[type.toLowerCase()]=window["page"+b+"Offset"];
				}
				else{
					b=document.documentElement.clientHeight?document.documentElement:document.body; 
					a[type.toLowerCase()]=b["scroll"+type];
				}
			}
			return a;
		}

		function l(){
			var a=document.body,b;
			if(window.innerHeight){
				b=window.innerHeight;
			}
			else{
				if(a.parentElement.clientHeight){
					b=a.parentElement.clientHeight;
				}
				else{
					if(a&&a.clientHeight){
						b=a.clientHeight;
					}
				}
			}
			return b;
		}

		function i(a){
			this.parent=document.body;
			this.createEl(this.parent,a);
			this.size=Math.random()*5+5;
			this.el.style.width=Math.round(this.size)+"px";
			this.el.style.height=Math.round(this.size)+"px";
			this.maxLeft=document.body.offsetWidth-this.size;
			this.maxTop=document.body.offsetHeight- this.size;
			this.left=Math.random()*this.maxLeft;
			this.top=h().top+1;this.angle=1.4+0.2*Math.random();
			this.minAngle=1.4;this.maxAngle=1.6;
			this.angleDelta=0.01*Math.random();
			this.speed=2+Math.random()
		}
		var j=false;
		g(function(){j=true});
		var f=true;window.createSnow=function(a,b){
			if(j){
				var c=[];
				m=setInterval(function(){
					f&&b>c.length&&Math.random()<b*0.0025&&c.push(new i(a));
					!f&&!c.length&&clearInterval(m);
					for(var e=h().top,n=l(),d=c.length-1;d>=0;d--){
						if(c[d])
							if(c[d].top<e||c[d].top+c[d].size+1>e+n){
								c[d].remove(); 
								c[d]=null;
								c.splice(d,1);
							}
							else{
								c[d].move();
								c[d].draw();
							}
					}
				},40);
				k(window,"scroll",function(){
					for(var e=c.length-1;e>=0;e--){
						c[e].draw();
					}
				})
			}
			else{
				g(function(){
					createSnow(a,b);
				})
			}
		};
		window.removeSnow=function(){
			f=false;
		};
		i.prototype={createEl:function(a,b){
			this.el=document.createElement("img");
			this.el.setAttribute("src",b+"http://mimg.127.net/hxm/quan/hd/111207_sdj/style/img/snow.gif");
			this.el.style.position="absolute";
			this.el.style.display="block";
			this.el.style.zIndex="99999";
			this.parent.appendChild(this.el)},
			move:function(){
				if(this.angle< this.minAngle||this.angle>this.maxAngle)
					this.angleDelta=-this.angleDelta;
					this.angle+=this.angleDelta;
					this.left+=this.speed*Math.cos(this.angle*Math.PI);
					this.top-=this.speed*Math.sin(this.angle*Math.PI);
					if(this.left<0){
						this.left=this.maxLeft;
					}
					else{
						if(this.left>this.maxLeft)
							this.left=0
					}
			},
			draw:function(){
				this.el.style.top=Math.round(this.top)+"px";
				this.el.style.left=Math.round(this.left)+"px"
			},
			remove:function(){
				this.parent.removeChild(this.el);
				this.parent=this.el=null
			}
		}
	})();

createSnow("", 80);

</script>
</head>
<body style="background-color:#77aac2">
	
</body>
</html>

 相关资料:https://jucelin.com/snow-js.html

下雪的js代码

标签:meta   lower   char   body   dde   val   creates   back   The   

原文地址:https://www.cnblogs.com/time20181212/p/js20181212.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!