jQuery文字從頂部掉落效果

admin發表於2018-06-02
jQuery

本章節分享一段程式碼例項，它實現了文字從頂部掉落，然後組成一個字串的效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
.canvas{
  width:500px;
  height:500px;
  position:relative;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
function Falling(){
 this.dict=["antzone","softwhy","青島市南區","螞蟻部落","努力奮鬥","css","js","softwhy.com"];
 this.canvas=$("#canvas");
 this.freq=10;
 this.height=500;
 this.width=500;
 this.si=null;
}
Falling.prototype={
 fallingAction:function(dom){
  var self=this;
  var freqs=[10,15,20];
  var disS=[];
  var disPerFreqS=[];
  var targetDis=500;
  var domCssTopS=[];
  var successDom=[];
  var successCount=0;
  var total=dom.length;
  var freqMarkLength=freqs.length;
  for(var index=0,j=dom.length;index<j;index++){
   domCssTopS[index]=dom[index].position().top;
   disS[index]=0;
   disPerFreqS[index]=freqs[parseInt(Math.random()*freqMarkLength)];
  }
  self.si=setInterval(function(){
   if(successCount>=total){
    clearInterval(self.si);
   }
   for(var index=0,j=dom.length;index<j;index++){
    if(typeof(successDom[index])!="undefined" && successDom[index]=="ok"){
     continue;
    }
    disS[index] += disPerFreqS[index];
    if(disS[index] >= targetDis){
     dom[index].css("top", targetDis+domCssTopS[index]);
     successDom[index]="ok";
     successCount++;;
    }else{
     dom[index].css("top", disS[index]+domCssTopS[index]);
    }
   }
  },self.freq);
 },
 init:function(){
  var self=this;
  self.canvas.html('');
  var dom=[];
  var l=0;
  var t=0;
  var tempDom=$("<div></div>").appendTo($("body"));
  for(var index=0,j=self.dict.length;index<j;index++){
   dom[index]=$("<span style='position:absolute'>"+self.dict[index]+"</span>").appendTo(tempDom);
   var domWidth=dom[index].width();
   var domHeight=dom[index].height();
   if(t<self.height){
    if(l<self.width){
     if(domWidth+l<=self.width){
      dom[index].css({"top":t,"left":l});
      self.canvas.append(dom[index]);
      l += dom[index].width();
     }else{
      if(domHeight+t<=self.height){
       t=t+domHeight;
       dom[index].css({"top":t,"left":0});
       self.canvas.append(dom[index]);
       l = dom[index].width();
      }else{
       break;
      }
     }
    }else{
      if(domHeight+t<=self.height){
       t=t+domHeight;
       l=0;
       dom[index].css({"top":t,"left":l});
       self.canvas.append(dom[index]);
      }else{
       break;
      }
    }
   }
  }
  self.fallingAction(dom);
 }
}
 
$(document).ready(function(){
  var falling=new Falling();
  $("#bt").click(function(){
    falling.init();
  })
});
</script>
</head>
<body>
<div>
<input type="button" id="bt" value="檢視效果" />
</div>
<div class="canvas" id="canvas"></div>
</body>
</html>

上面的程式碼實現了我們的要求，下面介紹一下它的實現過程。

一.程式碼註釋:

（1）.function Falling(){}，建立一個建構函式，裡面定義了一些基本引數。

（2）.this.dict=["antzone","softwhy","青島市南區","螞蟻部落","努力奮鬥","css","js","softwhy.com"]，將要掉落的文字放入陣列。

（3）.this.canvas=$("#canvas"),獲取id屬性值為canvas的元素。

（4）.this.freq=10,設定定時器執行的間隔。

（5）.this.height=500，設定高度值，這個值就是canvas元素的高度。

（6）.this.width=500,設定寬度值，這個值就是canvas元素的寬度。

（7）.this.si=null,用來作為定時器函式的標識。

（8）.Falling.prototype={}，設定Falling的原型物件。

（9）.fallingAction:function(dom){}，實現下落動作，引數是包裝有每一個字串的dom元素。

（10）.var self=this,將this的索引值賦值給self變數。

（11）.var freqs=[10,15,20],此陣列定義了每次下落的尺寸，隨機抽取使用。

（12）.var disS=[],記錄每個dom元素的距離頂部的尺寸。

（13）.var disPerFreqS=[],儲存每一個dom元素下落的速度。

（14）.var targetDis=500，這個是最大尺寸。

（15）.var domCssTopS=[],儲存每一個dom元素的top屬性值。

（16）.var successDom=[],儲存哪些元素已經落到底部。

（17）.var successCount=0,儲存有多少個元素已經完成。

（18）.var total=dom.length，獲取dom元素的數目。

（19）.var freqMarkLength=freqs.length,獲取定義速度的陣列元素的數目。

（20）.for(var index=0,j=dom.length;index<j;index++){

  domCssTopS[index]=dom[index].position().top;

  disS[index]=0;

  disPerFreqS[index]=freqs[parseInt(Math.random()*freqMarkLength)];

}，遍歷每一個dom元素。

獲取每一個dom元素的top屬性值並存入domCssTopS陣列。

disS[index]=0，初始化元素最初下滑的距離，當然是0。

disPerFreqS[index]=freqs[parseInt(Math.random()*freqMarkLength)]，隨機獲取每一個dom元素下滑的速度。

（21）.self.si=setInterval(function(){

  if(successCount>=total){

    clearInterval(self.si);

  }

  for(var index=0,j=dom.length;index<j;index++){

    if(typeof(successDom[index])!="undefined" && successDom[index]=="ok"){

      continue;

    }

    disS[index] += disPerFreqS[index];

    if(disS[index] >= targetDis){

      dom[index].css("top", targetDis+domCssTopS[index]);

      successDom[index]="ok";

      successCount++;;

    }else{

      dom[index].css("top", disS[index]+domCssTopS[index]);

    }

  }

},self.freq);

通過定時器函式不斷的調整元素的下落。

if(successCount>=total){

  clearInterval(self.si);

}，如果完成的數量已經達到總數量，那麼就停止定時器函式的執行。

for(var index=0,j=dom.length;index<j;index++)，遍歷每一個dom元素。

if(typeof(successDom[index])!="undefined" && successDom[index]=="ok"){

  continue;

}，判斷元素是否已經完成，如果完整那麼就跳過此次迴圈，進入下一個。


disS[index] += disPerFreqS[index]，每一次執行都會累加下滑的距離。

if(disS[index] >= targetDis){

  dom[index].css("top", targetDis+domCssTopS[index]);

  successDom[index]="ok";

  successCount++;;

}else{

  dom[index].css("top", disS[index]+domCssTopS[index]);

}如果下滑的尺寸大於最大尺寸，那麼就設定元素的top值最大尺寸加上dom元素的top值。

同時設定當前dom元素為完成狀態，然後再給完整下滑的元素數量累加1。

否則的話，則繼續設定top屬性值（當然按照正常累加）。

（22）.init:function(){}，此方法實現了一些初始化效果。

（23）.var self=this,將this值賦值給self，通常這麼做的目的是為了防止不同的上下文中this發生改變，無法引用到原來的物件。

（24）.self.canvas.html(''),清空dom元素。

（25）.var dom=[]，宣告一個陣列用來儲存dom元素。

（26）.var l=0,宣告一個變數作為元素距離cansvas元素左側的距離。

（27）.var t=0,宣告一個變數作為元素距離cansvas元素頂部的距離。

（28）.var tempDom=$("<div style='position;absolute;left:-100000;visibility:hidden'></div>").appendTo($("body")),建立一個div元素，設定它為隱藏狀態，並且新增到body中。

（29）.for(var index=0,j=self.dict.length;index<j;index++)，遍歷陣列中的每一個元素。

（30）.dom[index]=$("<span style='position:absolute'>"+self.dict[index]+"</span>").appendTo(tempDom),建立一個span元素，這個span元素中的內容就是陣列中的文字內容，並追加給剛建立的div元素。

（31）.var domWidth=dom[index].width(),獲取dom元素的寬度。

（32）.var domHeight=dom[index].height(),獲取dom元素的高度。

（33）.if(t<self.height){

  if(l<self.width){

    if(domWidth+l<=self.width){

      dom[index].css({"top":t,"left":l});

      self.canvas.append(dom[index]);

      l += dom[index].width();

    }else{

      if(domHeight+t<=self.height){

        t=t+domHeight;

        dom[index].css({"top":t,"left":0});

        self.canvas.append(dom[index]);

        l = dom[index].width();

      }else{

        break;

      }

    }

  }else{

    if(domHeight+t<=self.height){

      t=t+domHeight;

      l=0;

      dom[index].css({"top":t,"left":l});

      self.canvas.append(dom[index]);

    }else{

      break;

    }

  }

}這段程式碼的功能基本是水平排列span元素，也就是將字串成行排列，如果超過寬度就進行換行。

二.相關閱讀:

（1）.prototype參閱JavaScript prototype原型一章節。

（2）.position()參閱jQuery position()一章節。

（3）.parseInt()參閱JavaScript parseInt()一章節。

（4）.Math.random()參閱JavaScript Math.random()一章節。

（5）.setInterval()參閱setInterval()一章節。

（6）.clearInterval()參閱window.clearInterval()一章節。

（7）.appendTo()參閱jQuery appendTo()一章節。

相關文章