js鼠標(biāo)滑過圖片震動特效的方法
更新時(shí)間：2015年02月17日 12:04:10 作者：代碼家園
這篇文章主要介紹了js鼠標(biāo)滑過圖片震動特效的方法,涉及onMouseOver事件及圖片操作的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
本文實(shí)例講述了js鼠標(biāo)滑過圖片震動特效的方法。分享給大家供大家參考。具體實(shí)現(xiàn)方法如下：
復(fù)制代碼 代碼如下:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>鼠標(biāo)滑過 圖片震動效果</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>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>鼠標(biāo)滑過 圖片震動效果</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>
希望本文所述對大家的javascript程序設(shè)計(jì)有所幫助。
相關(guān)文章
本篇文章主要介紹了微信小程序之頁面攔截器的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
javascript實(shí)現(xiàn)點(diǎn)擊按鈕讓DIV層彈性移動的方法
這篇文章主要介紹了javascript實(shí)現(xiàn)點(diǎn)擊按鈕讓DIV層彈性移動的方法,實(shí)例分析了javascript操作div層的操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02
這篇文章主要介紹了JavaScript類繼承及實(shí)例化的方法,較為詳細(xì)的分析了javascript擴(kuò)展類、實(shí)例化類及類對象與成員函數(shù)的使用技巧,需要的朋友可以參考下2015-07-07
深入學(xué)習(xí) JavaScript中的函數(shù)調(diào)用
可能很多人在學(xué)習(xí) JavaScript 過程中碰到過函數(shù)參數(shù)傳遞方式的迷惑，本著深入的精神，我給大家分享了一篇教程關(guān)于javascript中的函數(shù)調(diào)用知識，感興趣的朋友一起學(xué)習(xí)吧2017-03-03
在調(diào)試JavaScript的過程中，你是不是經(jīng)常會遇到object undefined的問題呢？你平時(shí)是怎樣來測試對象是否存在呢？判斷瀏覽器版本？判斷JavaScript版本？本文來告訴你正確的方法。這篇文章涉及的瀏覽器可能古老一些，但是闡述的道理確實(shí)適合現(xiàn)在使用的。2008-10-10
jQuery Mobile動態(tài)刷新頁面樣式的實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄猨Query Mobile動態(tài)刷新頁面樣式的實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-05-05
javascript靜態(tài)頁面?zhèn)髦档娜N方法分享
這篇文章介紹了javascript靜態(tài)頁面?zhèn)髦档娜N方法及優(yōu)缺點(diǎn)，有需要的朋友可以參考一下2013-11-11
靜態(tài)頁面實(shí)現(xiàn) include 引入公用代碼的示例
下面小編就為大家?guī)硪黄o態(tài)頁面實(shí)現(xiàn) include 引入公用代碼的示例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
用js調(diào)用迅雷下載代碼的二種方法，需要的朋友可以參考一下2013-04-04
簡單純js實(shí)現(xiàn)點(diǎn)擊切換TAB標(biāo)簽實(shí)例
選項(xiàng)卡效果代碼，無jq,JS來實(shí)現(xiàn)，灰色風(fēng)格，沒有怎么美化，或許看上去比較普通，不過兼容性和操作起來挺舒服的，風(fēng)格適用于大部分的網(wǎng)站，或許你會用得上。2015-08-08