你的位置:首页 > Java教程

[Java教程]前端小练——雪花特效插件

   闲来无事,写写Js练练手,今天做了一个简单版的雪花特效背景插件,与大家分享下。

   这里给出几个思路步骤及相应代码:

   首先,我们要写一个雪花标本并隐藏,这里引入了jquery库,如下:

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>snowy</title>  <script type="text/javascript" src="js/jquery.js"></script>  <style type="text/css">    body{    background:url("img/town2.jpg");    }  </style></head><body><img speed="slow" size="small"  /> </body></html>

  你可以设置<img>标签里的 speed和size属性,speed:"slow,normal,fast"; size:"small,normal,big“。分别表示雪花的速度和大小。

     然后,我们需要一个生产雪花标本的类。

     在此之前,我们应该知道,雪花产生时其初始的横坐标位置应当是随机的,所以这里先提供了一个生产随机位置的函数:

 var snowyPic=$("img").eq(0); //雪花标本     //雪花位置随机数   function randomAt(){    var widthPos = Math.random().toString().slice(0,5);    widthPos =widthPos*1000;     if(widthPos >= $(window).width()) widthPos=$(window).width()-100;    return widthPos;   }   //生产雪花标本   function snowyCreate(speed,size){    this.speed=speed; //雪花速度    this.pos_x=randomAt(); //横坐标    this.pos_y=0; //纵坐标    var self=this;    this.create=function(){      var random=Math.random()+Math.random();     random=random.toString().slice(2,9); //id有长度限制     $("body").append("<img src='img/snow.png' id= '"+random+"'/>");     var _star=$("#"+random);     if(size === "normal"){ var snowySize="60px";}     else if(size === "small"){ var snowySize="30px";}      else if(size === "big"){var snowySize="90px";}      _star.css({width:snowySize});      _star.offset({left:this.pos_x,top:this.pos_y});     return _star;    };    //下落    this.drift=function(domOb){            var _star=domOb;      var drop=setInterval(function(){        //self.pos_x=self.pos_x + Math.random()*50;        self.pos_x=self.pos_x + 20;        self.pos_y=self.pos_y +40;        var _option={         left: self.pos_x,         top: self.pos_y,        };         if(_star.offset().top <= $(window).height()-100 && _star.offset().left <= $(window).width()-100){           _star.offset(_option);         }         else {           _star.remove();           clearInterval(drop);         }        },self.speed);      } ;       this.drift(this.create());  }

  在上面这段代码中,我把雪花下落的行为函数放在了生产雪花的类中,并借用new()实例重新开辟新上下文并执行函数体的机制把生产create()后的雪花实例当作参数衔接到drift()函数中,实现雪花产生并带有下落动作。

      最后,我提取了雪花标本里设置的参数们并放到options对象中,在最后读取各参数渲染。

       具体的代码和文件完整的包在github上:https://github.com/Johnharvy/snowy-plugin。

      如果您有点兴趣,点个赞给我点鼓励吧!