js鼠標滑過圖片震動特效的方法
更新時間：2015年02月17日 12:04:10 作者：代碼家園
這篇文章主要介紹了js鼠標滑過圖片震動特效的方法,涉及onMouseOver事件及圖片操作的技巧,具有一定參考借鑒價值,需要的朋友可以參考下
本文實例講述了js鼠標滑過圖片震動特效的方法。分享給大家供大家參考。具體實現(xiàn)方法如下：
復(fù)制代碼 代碼如下:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>鼠標滑過 圖片震動效果</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;"/>
鼠標滑過圖片預(yù)覽效果。
</body>
</html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>鼠標滑過 圖片震動效果</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;"/>
鼠標滑過圖片預(yù)覽效果。
</body>
</html>
希望本文所述對大家的javascript程序設(shè)計有所幫助。
相關(guān)文章
JS多個矩形塊選擇效果代碼(模擬CS結(jié)構(gòu))
非常不錯的可以選擇多個矩形塊的功能代碼2008-11-11
最近使用了electron框架,發(fā)現(xiàn)如果自定義拖動是比較實用的;特別是定制化比較高的項目,如果單純的使用-webkit-app-region:?drag;會讓鼠標事件無法觸發(fā),這篇文章主要介紹了Electron無邊框自定義窗口拖動的問題小結(jié),需要的朋友可以參考下2024-04-04
這篇文章主要介紹了詳解webpack引入第三方庫的方式以及注意事項，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01
這篇文章主要為大家詳細介紹了JavaScript手風琴頁面的制作代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
file模式訪問網(wǎng)頁時iframe高度自適應(yīng)解決方案
最近做到iframe的高度自適應(yīng)這個問題;發(fā)現(xiàn)自己做的網(wǎng)頁是通過file方式訪問的，將網(wǎng)頁代碼放到apache下通過http協(xié)議訪問，在iframe加載的時候調(diào)用如下js方法:果然網(wǎng)頁高度能夠自適應(yīng)（對于其他方案應(yīng)該也有效果，我沒有注意去嘗試）感興趣的朋友可以了解下2013-01-01
分割字符串的方法有很多，這篇文章主要介紹了一個JavaScript用逗號分割字符串實例，需要的朋友可以參考下2014-09-09
任何一對花括號中的語句集都屬于一個塊，在這之中定義的所有變量在代碼塊外都是不可見的，我們稱之為塊級作用域2014-09-09
這篇文章主要為大家詳細介紹了比較常見的js蒙版效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-01-01
這篇文章主要介紹了JS+DIV實現(xiàn)的卷簾效果,結(jié)合具體實例形式對比分析了javascript響應(yīng)鼠標事件動態(tài)操作頁面元素屬性實現(xiàn)展開與折疊效果的相關(guān)操作技巧,需要的朋友可以參考下2017-03-03
這篇文章主要介紹了antd Upload 文件上傳的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12