找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 2650|回复: 2

[分享] 冬天到了,发个下雪的js

[复制链接]
发表于 2011-12-20 14:21:17 | 显示全部楼层 |阅读模式 来自 中国–江苏–南京
  1. <script>
  2.     /**
  3.      * Snow
  4.      */
  5.     (function(){
  6.         function k(a,b,c){
  7.             if(a.addEventListener)
  8.                 a.addEventListener(b,c,false);
  9.             else {
  10.                 a.attachEvent&&a.attachEvent("on"+b,c)
  11.             }
  12.         }
  13.         function g(a){
  14.             if(typeof window.onload!="function"){
  15.                 window.onload=a;
  16.             }else{
  17.                 var b=window.onload;
  18.                 window.onload=function(){
  19.                     b();
  20.                     a()
  21.                 }
  22.             }
  23.         }
  24.         function h(){
  25.             var a={};
  26.             for(type in{Top:"",Left:""}){
  27.                 var b=type=="Top"?"Y":"X";
  28.                 if(typeof window["page"+b+"Offset"]!="undefined")
  29.                     a[type.toLowerCase()]=window["page"+b+"Offset"];
  30.                 else{
  31.                     b=document.documentElement.clientHeight?document.documentElement:document.body;
  32.                     a[type.toLowerCase()]=b["scroll"+type]
  33.                 }
  34.             }
  35.             return a
  36.         }
  37.         function l(){
  38.             var a=document.body,b;
  39.             if(window.innerHeight)
  40.                 b=window.innerHeight;
  41.             else if(a.parentElement.clientHeight)
  42.                 b=a.parentElement.clientHeight;
  43.             else if(a&&a.clientHeight)
  44.                 b=a.clientHeight;
  45.             return b
  46.         }
  47.         function i(a){
  48.             this.parent=document.body;
  49.             this.createEl(this.parent,a);
  50.             this.size=Math.random()*5+3;
  51.             this.el.style.width=Math.round(this.size)+"px";
  52.             this.el.style.height=Math.round(this.size)+"px";
  53.             this.maxLeft=document.body.offsetWidth-this.size;
  54.             this.maxTop=document.body.offsetHeight- this.size;
  55.             this.left=Math.random()*this.maxLeft;
  56.             this.top=h().top+1;
  57.             this.angle=1.4+0.2*Math.random();
  58.             this.minAngle=1.4;
  59.             this.maxAngle=1.6;
  60.             this.angleDelta=0.01*Math.random();
  61.             this.speed=2+Math.random()
  62.         }
  63.         var j=false;
  64.         g(function(){
  65.             j=true
  66.         });
  67.         var f=true;
  68.         window.createSnow=function(a,b){
  69.             if(j){
  70.                 var c=[],m=setInterval(function(){
  71.                     f&&b>c.length&&Math.random()<b*0.0025&&c.push(new i(a));
  72.                     !f&&!c.length&&clearInterval(m);
  73.                     for(var e=h().top,n=l(),d=c.length-1;d>=0;d--)
  74.                         if(c[d])
  75.                         if(c[d].top<e||c[d].top+c[d].size+1>e+n){
  76.                             c[d].remove();
  77.                             c[d]=null;
  78.                             c.splice(d,1)
  79.                         }else{
  80.                             c[d].move();
  81.                             c[d].draw()
  82.                         }
  83.                 },40);
  84.                 k(window,"scroll",function(){
  85.                     for(var e=c.length-1;e>=0;e--)
  86.                         c[e].draw()
  87.                 })
  88.             }else
  89.                 g(function(){
  90.                     createSnow(a,b)
  91.                 })
  92.         };
  93.         window.removeSnow=function(){
  94.             f=false
  95.         };
  96.         i.prototype={
  97.             createEl:function(a,b){
  98.                         //var imgs = new Array;
  99.                         //imgs = ['http://img04.taobaocdn.com/tps/i4/T1qlKHXiVeXXXXXXXX-12-12.gif','http://img04.taobaocdn.com/tps/i4/T1qlKHXiVeXXXXXXXX-12-12.gif','http://img04.taobaocdn.com/tps/i4/T1qlKHXiVeXXXXXXXX-12-12.gif']
  100.                         //var rnd = imgs[Math.floor(Math.random()*imgs.length)];
  101.                         this.el=document.createElement("img");
  102.                         this.el.setAttribute("src","http://img04.taobaocdn.com/tps/i4/T1qlKHXiVeXXXXXXXX-12-12.gif");
  103.                         //this.el.setAttribute("class","fixpng");
  104.                         this.el.style.position="absolute";
  105.                         this.el.style.display="block";
  106.                         this.el.style.zIndex="99";
  107.                         //document.getElementById('snow').appendChild(this.el);
  108.                         this.parent.appendChild(this.el)
  109.                      },
  110.             move:function(){
  111.                      if(this.angle< this.minAngle||this.angle>this.maxAngle)
  112.                          this.angleDelta=-this.angleDelta;
  113.                     this.angle+=this.angleDelta;
  114.                     this.left+=this.speed*Math.cos(this.angle*Math.PI);
  115.                     this.top-=this.speed*Math.sin(this.angle*Math.PI);
  116.                     if(this.left<0)
  117.                         this.left=this.maxLeft;
  118.                     else if(this.left>this.maxLeft)
  119.                         this.left=0
  120.                  },
  121.             draw:function(){
  122.                      this.el.style.top=Math.round(this.top)+"px";
  123.                     this.el.style.left=Math.round(this.left)+"px"
  124.                  },
  125.             remove:function(){
  126.                 //document.getElementById('snow').removeChild(this.el);
  127.                 //document.getElementById('snow').this.el=null;
  128.                 this.parent.removeChild(this.el);
  129.                 this.parent=this.el=null
  130.             }
  131.         }
  132.     })();
  133.     /**
  134.      * This function takes 2 arguments
  135.      * First is the path to the directory with snowflake images
  136.      * Second is the maximum number of snowflakes, please do not
  137.      * set this number above 60 as it will impact the performance
  138.      */
  139.     createSnow('', 60);
  140. </script>
复制代码


评分

参与人数 1金币 +3 收起 理由
光明使者 + 3 赞一个!

查看全部评分

发帖求助前要善用【论坛搜索】功能,那里可能会有你要找的答案;

如何回报帮助你解决问题的坛友,好办法就是点击帖子下方的评分按钮给对方加【金币】不会扣除自己的积分,做一个热心并受欢迎的人!

 楼主| 发表于 2011-12-20 14:21:51 | 显示全部楼层 来自 中国–江苏–南京
本帖最后由 mseed 于 2011-12-20 14:29 编辑

例子网址:一淘http://www.etao.com/go/act/act-x ... m=1.119295.147801.1
代码都是一样的,就看大家设计水平啦

发帖求助前要善用【论坛搜索】功能,那里可能会有你要找的答案;

如何回报帮助你解决问题的坛友,好办法就是点击帖子下方的评分按钮给对方加【金币】不会扣除自己的积分,做一个热心并受欢迎的人!

回复 支持 反对

使用道具 举报

 楼主| 发表于 2011-12-20 14:22:44 | 显示全部楼层 来自 中国–江苏–南京
本帖最后由 mseed 于 2011-12-20 14:29 编辑

只要粘贴到页面里面就能用~

发帖求助前要善用【论坛搜索】功能,那里可能会有你要找的答案;

如何回报帮助你解决问题的坛友,好办法就是点击帖子下方的评分按钮给对方加【金币】不会扣除自己的积分,做一个热心并受欢迎的人!

回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则 需要先绑定手机号

关闭

站长推荐上一条 /1 下一条

QQ|侵权投诉|广告报价|手机版|小黑屋|西部数码代理|飘仙建站论坛 ( 豫ICP备2022021143号-1 )

GMT+8, 2024-11-22 06:06 , Processed in 0.051257 second(s), 13 queries , Redis On.

Powered by Discuz! X3.5

© 2001-2024 Discuz! Team.

快速回复 返回顶部 返回列表