js實現的元素抖動效果程式碼例項

antzone發表於2017-04-07
JS

抖動效果在很多功能中都有應用，比如表單登入密碼不正確的話，點選登入按鈕就會以抖動的形式進行提示。

下面就通過程式碼例項介紹一下如何實現此效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
#body{
  text-align:center;
}
#antzone{
  width:200px;
  position:absolute;
  margin:10px auto;
  height:100px;
  border:2px dotted red;
  text-align:center
}
</style>
<script type="text/javascript">
function SKclass (obj,Rate,speed) {
  var oL=obj.offsetLeft;
  var oT=obj.offsetTop;
  this.stop=null;
  this.oTime=null;
  var om=this;
  this.start=function(){
    if(parseInt(obj.style.left)==oL-2){
      obj.style.top=oT+2+"px";
      setTimeout(function(){obj.style.left=oL+2+"px"},Rate)
    }
    else{
      obj.style.top=oT-2+"px";
      setTimeout(function(){obj.style.left=oL-2+"px"},Rate)
    }
    this.oTime=setTimeout(function(){om.start()},speed);
  }
  this.stop=function(){
    clearTimeout(this.oTime);
  }
}
window.onload=function(){
  var m=document.getElementById("antzone");
  var nn=new SKclass(m,20,70);
  var shakeBt=document.getElementById("shake");
  var stBt=document.getElementById("st");
   
  shakeBt.onclick=function(){nn.start()}
  stBt.onclick=function(){nn.stop()}
}
</script>
</head>
<body>
<div style="margin:10px 200px">
  <div><input type="button" id="shake" value="點選抖動"/></div>
  <div><input type="button" id="st" value="逐漸停止抖動"/></div>
  <div id="antzone"></div>
</div>
</body>
</html>

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

一.程式碼註釋:

（1）.function SKclass (obj,Rate,speed) {}，這是建立一個建構函式，第一個引數是要抖動的元素，第二個和第三個引數都是規定定時器函式延遲多長時間再去執行。

（2）.var oL=obj.offsetLeft，在當前程式碼中是獲取元素距離body左側的距離。

（3）.var oT=obj.offsetTop，在當前程式碼中是獲取元素距離body頂部的距離。

（4）.this.stop=null，建立一個屬性，並賦值為null。

（5）.this.oTime=null,這個屬性是用作定時器函式的標識。

（6）.var om=this,將this值賦值給變數om。

（7）.this.start=function(){

  if(parseInt(obj.style.left)==oL-2){

   obj.style.top=oT+2+"px";

    setTimeout(function(){obj.style.left=oL+2+"px"},Rate)

}

  else{

    obj.style.top=oT-2+"px";

    setTimeout(function(){obj.style.left=oL-2+"px"},Rate)

  }

  this.oTime=setTimeout(function(){om.start()},speed);

}，這段程式碼的功能就是讓元素向左和向上2px範圍內抖動。

最後一局是採用遞迴的方式呼叫this.start()方法，這樣就實現了持續抖動。

（8）.this.stop=function(){

  clearTimeout(this.oTime);

}，停止定時器函式的執行。

二.相關閱讀:

（1）.建構函式可以參閱javascript建構函式簡單介紹一章節。

（2）.offsetLeft可以參閱js offsetLeft一章節。

（3）.parseInt()方法可以參閱javascript parseInt()一章節。

（4）.setTimeout()方法可以參閱setTimeout()一章節。

（5）.new運算子的作用可以參閱js new運算子一章節。

相關文章