2008年3月14日 星期五

震動圖片

步驟一、複製程式碼至<head></head>之間

<style>

.shakeimage{

position:relative

}

</style>

<script language="JavaScript1.2">



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

}

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>

 


步驟二、複製到網頁中欲呈現特效的位置
<img src="logo.gif" class="shakeimage" onMouseover="init(this);rattleimage()"
onMouseout="stoprattle(this)">


修改事項:
如果要增加多個圖片只要直接增加步驟二的語法,在修改圖片檔名。
<img src="logo.gif" ...

沒有留言: