<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JavaScript層抖動效果</title>
<style type="text/css">
#body{text-align:center;}
#test{width:200px;position:absolute;margin:10px auto;height:100px;border:2px dotted red;text-align:center}
</style>
</head>
<body>
<div style="margin:10px 200px">
<div>
<input type="button" value="~點這里讓我抖抖吧~" onclick="nn.start()" /></div>
<div>
<input type="button" value="晃暈了，我不抖了！" onclick="nn.stop()" /></div>
<div id="test">
<br>
<img border="0" src="smiley.gif"></div>
</div>
<p>　</p>
<p>　</p>
</body>
</html>
<script type="text/javascript">
var m=document.getElementById("test");
function SKclass (obj,Rate,speed) {
var oL=obj.offsetLeft;
var oT=obj.offsetTop;
this.stop=null;
this.oTime=null;
var om=this;
this.start=function(){
if(parseInt(obj.style.left)==oL-2){
obj.style.top=oT+2+"px";
setTimeout(function(){obj.style.left=oL+2+"px"},Rate)
}
else{
obj.style.top=oT-2+"px";
setTimeout(function(){obj.style.left=oL-2+"px"},Rate)
}
this.oTime=setTimeout(function(){om.start()},speed);
}
this.stop=function(){
clearTimeout(this.oTime);

}
}
var nn=new SKclass(m,20,70);
</script>
</body>
</html>

再來一個更簡單的

 <img id="win" style='position:relative' src="/UploadPic/2008-9/2008962512241.jpg">
<br /><br />
<button onclick="zd()">振動</button>
<script >
function zd(u){ 
 var a=['top','left'],b=0;
 u=setInterval(function(){
 document.getElementById('win').style[a[b%2]]=(b++)%4<2?0:4;
 if(b>15){clearInterval(u);b=0}
 },32)
}
</script>

以上所述就是本文的全部內(nèi)容了，希望大家能夠喜歡。

您可能感興趣的文章:

相關(guān)文章

JavaScript捕捉事件和阻止冒泡事件實例分析
這篇文章主要介紹了JavaScript捕捉事件和阻止冒泡事件,結(jié)合實例形式分析了冒泡的原理及javascript阻止冒泡的相關(guān)操作技巧,需要的朋友可以參考下
2018-08-08
javascript 類型判斷代碼分析
今天看到司徒一篇blog， javascript深拷貝，其中涉及到一種判斷類型的方法，特分析如下
2010-03-03
詳解Flutter如何用思源宋體炫出你的UI
這篇文章主要為大家介紹了Flutter如何用思源宋體炫出你的UI示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-04-04
ES6 解構(gòu)賦值的原理及運用
ES6允許按照一定模式從數(shù)組或?qū)ο笾刑崛≈担缓髮ψ兞窟M行賦值，稱為解構(gòu)。只要等號兩邊的模式相同，左邊的變量就會被賦予對應(yīng)的值，這種寫法屬于“模式匹配”。統(tǒng)稱起來就叫做“解構(gòu)賦值”。
2021-05-05
JavaScript中使用Spread運算符的八種方法總結(jié)
這篇文章主要給大家介紹了JavaScript中使用Spread運算符的八種方法，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用JavaScript具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
2020-06-06
js實現(xiàn)嵌套數(shù)組重排序
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)嵌套數(shù)組重排序，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-01-01
判斷復(fù)選框是否被選中的兩種方法
這篇文章主要介紹了判斷復(fù)選框是否被選中的兩種方法，經(jīng)測試還不錯，大家可以學(xué)習(xí)下
2014-06-06
JavaScript中閉包之淺析解讀(必看篇)
下面小編就為大家?guī)硪黄狫avaScript中閉包之淺析解讀(必看篇)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-08-08
javascript 精粹筆記
javascript 精粹筆記，都是一些js下應(yīng)用技巧之類，學(xué)習(xí)js的朋友可以簡單的參考瀏覽下。
2010-05-05
DWR3 訪問WEB元素的兩種方法實例詳解
這篇文章主要介紹了DWR3 訪問WEB元素的兩種方法實例詳解的相關(guān)資料,需要的朋友可以參考下
2017-01-01