Javascript下雪特效

nkc3g4

本文来自lyz810的空间，http://hi.baidu.com/lyz810/item/1f4567768dfbd23d71442399
效果演示：http://www.lyz810.tk/lab/Snow.php
该特效适用于非IE浏览器,由于下雪由setTimeout调用,IE在setTimeout的误差过大
调用方式:lyz.snow(option)
option为json格式：
stopdiv:雪花停留元素，可选项，可以是一个HTMLElement或String,当参数为String类型时,为指定的id作为停留元素
speed:默认速度为每50ms执行一次,该参数可选项,数值类型,有效范围0~4,数值越大,速度越快,但对浏览器性能要求会越高,适当做测试,选择一个恰当的速度
num:默认雪花数100,该参数可选项,数值类型,建议不要超过200,否则大多数浏览器对CPU的开销极大,一般设置50左右即可 sym:默认为*,雪花默认样式,通常不需要更改

1. var lyz=lyz||{};
   
2. lyz.snow=function(option){
   
3.     option=option||{};
   
4.     var G=function(id){
   
5.         return document.getElementById(id);
   
6.     }
   
7.     var g=function(id){
   
8.         if(typeof id=='string'){
   
9.             return G(id);
   
10.         }else if(typeof id=='object'){
    
11.             return id;
    
12.         }
    
13.     }
    
14.     var snowspeed=[100,80,60,40,20];
    
15.     var snowflakes = option.sym||'*';//闆姳鏍峰紡
    
16.     var drops = option.num||100;//闆姳鏁扮洰
    
17.     var stopdiv = option.stopdiv||null;
    
18.     var speed = snowspeed[option.speed]||50;
    
19.     var snowflake = new Array();
    
20.     var x = new Array();
    
21.     var y = new Array();
    
22.     var mv = new Array();
    
23.     var maxx = document.documentElement.clientWidth;
    
24.     var maxy = document.documentElement.clientHeight;
    
25.     for(i = 0; i < drops; i++){
    
26.         document.write('<div id="lyz_snow'+i+'" style="position:absolute;color:white;cursor:default">'+snowflakes+'</div>');
    
27.         snowflake[i] = G('lyz_snow'+i)
    
28.         x[i] = Math.random()*maxx-40;
    
29.         y[i] = -Math.random()*maxy;
    
30.         snowflake[i].style.left = x[i]+'px';
    
31.         snowflake[i].style.top = y[i]+'px';
    
32.         mv[i] = (Math.random()*5)+0.5;
    
33.         snowflake[i].style.fontSize = ((Math.random()-0.5)*10)+16;
    
34.     }
    
35.     var startsnow=function(){
    
36.         var stopsnow = true;
    
37.         for(i=0; i<drops; i++){
    
38.             var movex = (Math.random()-0.75)*2.5;
    
39.             if(stopdiv){
    
40.                 if(x[i]<g(stopdiv).offsetLeft||x[i]>g(stopdiv).offsetLeft+g(stopdiv).offsetWidth||y[i]<g(stopdiv).offsetTop-15-window.scrollY||y[i]>g(stopdiv).offsetTop+g(stopdiv).offsetHeight-15-window.scrollY){
    
41.                     x[i]+=movex;
    
42.                     y[i]+=mv[i];
    
43.                     stopsnow = false;
    
44.                 }
    
45.             }else{
    
46.                 x[i]+=movex;
    
47.                 y[i]+=mv[i];
    
48.                 stopsnow = false;
    
49.             }//endOfElse
    
50.             if(x[i] < 0||x[i]>maxx){
    
51.                 x[i] = Math.random()*maxx-40;
    
52.                 y[i] = 10;
    
53.             }
    
54.             if(y[i] > maxy-40){
    
55.                 y[i] = 10;
    
56.             }
    
57.             snowflake[i].style.left = x[i]+'px';
    
58.             snowflake[i].style.top = y[i]+document.body.scrollTop+'px';
    
59.         }//endOfFor
    
60.         if(!stopsnow){
    
61.             setTimeout(startsnow,speed);
    
62.         }
    
63.     }//endOfStartSnow
    
64.     startsnow();
    
65. }
    

复制代码