js鼠標(biāo)滑過圖片震動(dòng)特效的方法

更新時(shí)間：2015年02月17日 12:04:10 作者：代碼家園

這篇文章主要介紹了js鼠標(biāo)滑過圖片震動(dòng)特效的方法,涉及onMouseOver事件及圖片操作的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下

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

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>鼠標(biāo)滑過 圖片震動(dòng)效果</title>

<STYLE>.shakeimage {

 POSITION: relative

}

</STYLE>

</head>

<body>

<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 class="shakeimage" onMouseOver="init(this);rattleimage()" onMouseOut="stoprattle(this)" src="/images/csrcode.ico" border="0" style="cursor:pointer;"/>

<img class="shakeimage" onmouseover="init(this);rattleimage()" onmouseout="stoprattle(this)" src="/images/changshi.ico"  border="0" style="cursor:pointer;"/>

<img class="shakeimage" onmouseover="init(this);rattleimage()" onmouseout="stoprattle(this)" src="/images/links.ico" border="0" style="cursor:pointer;"/>

鼠標(biāo)滑過圖片預(yù)覽效果。

</body>

</html>

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

您可能感興趣的文章:

相關(guān)文章

JS多個(gè)矩形塊選擇效果代碼(模擬CS結(jié)構(gòu))
非常不錯(cuò)的可以選擇多個(gè)矩形塊的功能代碼
2008-11-11
Electron無邊框自定義窗口拖動(dòng)的問題小結(jié)
最近使用了electron框架,發(fā)現(xiàn)如果自定義拖動(dòng)是比較實(shí)用的;特別是定制化比較高的項(xiàng)目,如果單純的使用-webkit-app-region:?drag;會(huì)讓鼠標(biāo)事件無法觸發(fā),這篇文章主要介紹了Electron無邊框自定義窗口拖動(dòng)的問題小結(jié),需要的朋友可以參考下
2024-04-04
詳解webpack引入第三方庫的方式以及注意事項(xiàng)
這篇文章主要介紹了詳解webpack引入第三方庫的方式以及注意事項(xiàng)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2019-01-01
JavaScript手風(fēng)琴頁面制作
這篇文章主要為大家詳細(xì)介紹了JavaScript手風(fēng)琴頁面的制作代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-05-05
file模式訪問網(wǎng)頁時(shí)iframe高度自適應(yīng)解決方案
最近做到iframe的高度自適應(yīng)這個(gè)問題;發(fā)現(xiàn)自己做的網(wǎng)頁是通過file方式訪問的，將網(wǎng)頁代碼放到apache下通過http協(xié)議訪問，在iframe加載的時(shí)候調(diào)用如下js方法:果然網(wǎng)頁高度能夠自適應(yīng)（對(duì)于其他方案應(yīng)該也有效果，我沒有注意去嘗試）感興趣的朋友可以了解下
2013-01-01
一個(gè)JavaScript用逗號(hào)分割字符串實(shí)例
分割字符串的方法有很多，這篇文章主要介紹了一個(gè)JavaScript用逗號(hào)分割字符串實(shí)例，需要的朋友可以參考下
2014-09-09
JavaScript的作用域和塊級(jí)作用域概念理解
任何一對(duì)花括號(hào)中的語句集都屬于一個(gè)塊，在這之中定義的所有變量在代碼塊外都是不可見的，我們稱之為塊級(jí)作用域
2014-09-09
js實(shí)現(xiàn)蒙版效果
這篇文章主要為大家詳細(xì)介紹了比較常見的js蒙版效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-01-01
JS+DIV實(shí)現(xiàn)的卷簾效果示例
這篇文章主要介紹了JS+DIV實(shí)現(xiàn)的卷簾效果,結(jié)合具體實(shí)例形式對(duì)比分析了javascript響應(yīng)鼠標(biāo)事件動(dòng)態(tài)操作頁面元素屬性實(shí)現(xiàn)展開與折疊效果的相關(guān)操作技巧,需要的朋友可以參考下
2017-03-03
antd Upload 文件上傳的示例代碼
這篇文章主要介紹了antd Upload 文件上傳的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-12-12