javascript實現滑鼠懸浮圖片實現抖動效果

admin發表於2017-04-02
JavaScript

本章節介紹一段程式碼例項，它實現了滑鼠懸浮在圖片上實現圖片抖動效果，當滑鼠離開的時候，抖動效果消失。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
#img{
  position:relative
}
</style>
<script>
var rector=3;
var stopit=0; 
var a=1;
 
function init(which){
  stopit=0
  shake=which
  shake.style.left=0
  shake.style.top=0
}
function rattleimage(){
  if ((!document.all&&!document.getElementById)||stopit==1){
    return
  }
  if (a==1){
    shake.style.top=parseInt(shake.style.top)+rector+"px";
  }
  else if (a==2){
    shake.style.left=parseInt(shake.style.left)+rector+"px";
  }
  else if (a==3){
    shake.style.top=parseInt(shake.style.top)-rector+"px";
  }
  else{
    shake.style.left=parseInt(shake.style.left)-rector+"px";
  }
  if (a<4){
    a++
  }
  else{
    a=1
  }
  setTimeout("rattleimage()",50)
}
function stoprattle(which){
  stopit=1
  which.style.left=0
  which.style.top=0
}
window.onload=function(){
  var img=document.getElementById("img");
  img.onmouseover=function(){
    init(this);
    rattleimage()
  }
  img.onmouseout=function(){
    stoprattle(this)
  }
}
</script>
</head>
<body>
<img src="demo/js/img/small.jpg" id="img"/>
</body>
</html>

上面的程式碼實現了滑鼠懸浮圖片抖動效果，下面介紹一下它的實現過程。

一.程式碼註釋:

1.var rector=3，設定每次抖動的幅度。2.var stopit=0，標識是否關閉抖動效果。

3.var a=1，用來表示向哪個方向抖動。

4.function init(which){}，此函式用來初始化抖動，引數是要抖動的元素物件。

5.stopit=0，表示可以抖動。

6.shake=which，將物件引用賦值給變數shake。

7.shake.style.left=0，將left屬性值設定為0.

8.shake.style.top=0，將top屬性值設定為0.

9.function rattleimage(){}，此函式實現了抖動效果。

10.if ((!document.all&&!document.getElementById)||stopit==1){

  return

}，前面可能是判斷是否支援低版本的IE瀏覽器，當前已經沒必要存在，如果stopit等於1，那麼就是相當於關閉抖動，那麼就直接跳出函式。

11.if (a==1){

  shake.style.top=parseInt(shake.style.top)+rector+"px";

}，設定抖動的方位。

12.if (a<4){

  a++

}

else{

  a=1

}實現了抖動方位的不斷變化。

12.setTimeout("rattleimage()",50)，使用定時器函式遞迴呼叫當前函式。

13.function stoprattle(which){

  stopit=1

  which.style.left=0

  which.style.top=0

}，還原元素初始位置，也就是停止抖動。

二.相關閱讀:

1.parseInt()方法可以參閱js parseInt()一章節。

2.setTimeout()方法可以參閱setTimeout()一章節。

3.onmouseover事件可以參閱javascript mouseover 事件一章節。 

4.onmouseout事件可以參閱javascript mouseout 事件一章節。

相關文章