這篇文章主要介紹了js實(shí)現(xiàn)鼠標(biāo)觸發(fā)圖片抖動(dòng)效果的方法,通過(guò)定時(shí)器定時(shí)遞歸調(diào)用rattleimage函數(shù)實(shí)現(xiàn)抖動(dòng)效果,非常實(shí)用,具有一定參考借鑒價(jià)值,需要的朋友可以參考下

本文實(shí)例講述了js實(shí)現(xiàn)鼠標(biāo)觸發(fā)圖片抖動(dòng)效果的方法。分享給大家供大家參考。具體實(shí)現(xiàn)方法如下：

復(fù)制代碼代碼如下:

<html>

<head>

<title>鼠標(biāo)觸發(fā)圖片抖動(dòng)效果</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>

鼠標(biāo)移動(dòng)上來(lái)看效果！</p>

</body>

</html>

希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

Bootstrap創(chuàng)建可折疊的組件
這篇文章主要為大家詳細(xì)介紹了Bootstrap創(chuàng)建可折疊組件的對(duì)應(yīng)方法，以實(shí)例為大家分享了Bootstrap折疊組件，感興趣的小伙伴們可以參考一下
2016-02-02
js module大戰(zhàn)
這篇文章主要介紹了js module，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04
如何實(shí)現(xiàn)js拖拽效果及原理解析
這篇文章主要介紹了如何實(shí)現(xiàn)js拖拽效果及原理解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-05-05
js左側(cè)多級(jí)菜單動(dòng)態(tài)的解決方案
實(shí)現(xiàn)的效果很簡(jiǎn)單，就是點(diǎn)一下顯示，再點(diǎn)一下就隱藏，只不過(guò)是多了幾級(jí)的問(wèn)題。好，現(xiàn)在來(lái)說(shuō)說(shuō)我的設(shè)計(jì)思路，首先從第一級(jí)別開(kāi)始，添加如下代碼
2010-02-02
bootstrap手風(fēng)琴折疊示例代碼分享
這篇文章主要為大家詳細(xì)介紹了bootstrap手風(fēng)琴折疊示例代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-05-05
javascript smipleChart 簡(jiǎn)單圖標(biāo)類
支持線性圖區(qū)域圖柱狀圖餅圖支持多瀏覽器用到的是svg vml 之后加上多層餅圖分段圖和組合圖
2011-01-01
js 數(shù)字、字符串、布爾值的轉(zhuǎn)換方法(必看)
下面小編就為大家?guī)?lái)一篇js 數(shù)字、字符串、布爾值的轉(zhuǎn)換方法(必看)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-04-04
js清空f(shuō)orm表單中的內(nèi)容示例
這篇文章主要介紹了js如何清空f(shuō)orm表單中的內(nèi)容，下面有個(gè)不錯(cuò)的示例，大家可以參考下
2014-05-05
JavaScript數(shù)據(jù)庫(kù)TaffyDB用法實(shí)例分析
這篇文章主要介紹了JavaScript數(shù)據(jù)庫(kù)TaffyDB用法,實(shí)例分析了TaffyDB數(shù)據(jù)庫(kù)的定義、查詢、更新、刪除等操作的相關(guān)使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-07-07
js下通過(guò)prototype擴(kuò)展實(shí)現(xiàn)indexOf的代碼
這里使用js prototype擴(kuò)展實(shí)現(xiàn)的indexOf的實(shí)現(xiàn)代碼，跟js自帶的方法，差不多。
2010-12-12