本版
查看: 4918|回复: 0

Javascript下雪特效

[复制链接]

Super Moderator

楼主(1#)
发表于 2013-5-29 20:48:38 | 只看该作者 |只看大图 |倒序浏览 |阅读模式
本文来自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||{};
    lyz.snow=function(option){
    option=option||{};
    var G=function(id){
    return document.getElementById(id);
    }
    var g=function(id){
    if(typeof id=='string'){
    return G(id);
    }else if(typeof id=='object'){
    return id;
    }
    }
    var snowspeed=[100,80,60,40,20];
    var snowflakes = option.sym||'*';//闆姳鏍峰紡
    var drops = option.num||100;//闆姳鏁扮洰
    var stopdiv = option.stopdiv||null;
    var speed = snowspeed[option.speed]||50;
    var snowflake = new Array();
    var x = new Array();
    var y = new Array();
    var mv = new Array();
    var maxx = document.documentElement.clientWidth;
    var maxy = document.documentElement.clientHeight;
    for(i = 0; i < drops; i++){
    document.write('<div id="lyz_snow'+i+'" style="position:absolute;color:white;cursor:default">'+snowflakes+'</div>');
    snowflake[i] = G('lyz_snow'+i)
    x[i] = Math.random()*maxx-40;
    y[i] = -Math.random()*maxy;
    snowflake[i].style.left = x[i]+'px';
    snowflake[i].style.top = y[i]+'px';
    mv[i] = (Math.random()*5)+0.5;
    snowflake[i].style.fontSize = ((Math.random()-0.5)*10)+16;
    }
    var startsnow=function(){
    var stopsnow = true;
    for(i=0; i<drops; i++){
    var movex = (Math.random()-0.75)*2.5;
    if(stopdiv){
    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){
    x[i]+=movex;
    y[i]+=mv[i];
    stopsnow = false;
    }
    }else{
    x[i]+=movex;
    y[i]+=mv[i];
    stopsnow = false;
    }//endOfElse
    if(x[i] < 0||x[i]>maxx){
    x[i] = Math.random()*maxx-40;
    y[i] = 10;
    }
    if(y[i] > maxy-40){
    y[i] = 10;
    }
    snowflake[i].style.left = x[i]+'px';
    snowflake[i].style.top = y[i]+document.body.scrollTop+'px';
    }//endOfFor
    if(!stopsnow){
    setTimeout(startsnow,speed);
    }
    }//endOfStartSnow
    startsnow();
    }
回复

支持 | 反对  0 支持 / 0 反对 评分 举报

联系我们(Contact)|手机版|萝卜头IT论坛 ( 苏ICP备15050961号-1 )

GMT+8, 2026-11-04 06:41 , Processed in 0.07 second(s), 20 queries , Gzip On.

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