前端小練——雪花特效插件

時間 2019-11-18

標籤前端雪花特效插件简体版

原文原文鏈接

閒來無事，寫寫Js練練手，今天作了一個簡單版的雪花特效背景插件，與你們分享下。javascript

這裏給出幾個思路步驟及相應代碼：css

首先，咱們要寫一個雪花標本並隱藏，這裏引入了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"  style="display:none;position:absolute;z-index:1001;" />  
</body>
</html>

　你能夠設置<img>標籤裏的 speed和size屬性，speed："slow,normal,fast"; size:"small,normal,big「。分別表示雪花的速度和大小。html

而後，咱們須要一個生產雪花標本的類。

在此以前，咱們應該知道，雪花產生時其初始的橫座標位置應當是隨機的，因此這裏先提供了一個生產隨機位置的函數：java

 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對象中，在最後讀取各參數渲染。

//提取參數
var options={
speed:function(){
if(snowyPic.attr("speed") ==="slow") return 100;
else if(snowyPic.attr("speed") === "normal") return 75;
else if(snowyPic.attr("speed") === "fast") return 50;
else {alert("格式設置有誤！"); clearInterval(produce);}
},
size:snowyPic.attr("size")
};

//測試
var produce= setInterval(function(){
var snowy = new snowyCreate(options.speed(),options.size);
},250);

　具體的代碼和文件完整的包在github上：https://github.com/Johnharvy/snowy-plugin。jquery

若是您有點興趣，點個贊給我點鼓勵吧！git