js实现鼠标触发图片抖动效果的方法

  本文实例讲述了js实现鼠标触发图片抖动效果的方法。分享给大家供大家参考。具体实现方法如下:

  

复制代码 代码如下:
<html>

  <head>

  <title>鼠标触发图片抖动效果</title>

  <style>

  .shakeimage{

  position:relative

  }

  </style>

  <script language="JavaScript1.2">

  //configure shake degree (where larger # equals greater shake)

  var rector=3

  ///////DONE EDITTING///////////

  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

  }

  else if (a==2){

  shake.style.left=parseInt(shake.style.left)+rector

  }

  else if (a==3){

  shake.style.top=parseInt(shake.style.top)-rector

  }

  else{

  shake.style.left=parseInt(shake.style.left)-rector

  }

  if (a<4)

  a++

  else

  a=1

  setTimeout("rattleimage()",50)

  }

  function stoprattle(which){

  stopit=1

  which.style.left=0

  which.style.top=0

  }

  </script>

  </head>

  <body bgcolor="#F7F7F7">

  <p align="center">

  <img src=/images/skinslogo.gif class="shakeimage" onMouseover="init(this);rattleimage()" onMouseout="stoprattle(this)">

  <br>

  鼠标移动上来看效果!</p>

  </body>

  </html>

  希望本文所述对大家的javascript程序设计有所帮助。