JS實現(xiàn)仿QQ聊天窗口抖動特效

更新時間：2015年05月10日 09:01:14 投稿：hebedich

本文給大家分享的是類似QQ窗口的抖動效果,只是覺得好玩，沒什么技術含量，推薦給大家，有需要的小伙伴可以參考下。

<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>

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

您可能感興趣的文章:

小程序如何支持使用 async/await詳解
這篇文章主要介紹了小程序如何支持使用 async/await詳解,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
2019-09-09
移動端使用localStorage緩存Js和css文的方法(web開發(fā))
這篇文章主要介紹了web移動端使用localStorage緩存Js和css文的方法,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
2016-09-09
淺談webpack下的AOP式無侵入注入
下面小編就為大家?guī)硪黄獪\談webpack下的AOP式無侵入注入。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-11-11
寫出更好的JavaScript之undefined篇（上）
先聲明一些東西，消除歧義：這篇博文中的JavaScript是指一般意義上的JavaScript，并不只限定“自稱是JavaScript”的運行環(huán)境
2009-11-11
js獲取select選中的option的text示例代碼
獲取select選中的option的text的方法有很多，下面為大家介紹下使用js的獲取方法，感興趣的朋友可以參考下
2013-12-12
瀏覽器緩存技術實現(xiàn)淺析
這篇文章主要為大家介紹了瀏覽器緩存技術實現(xiàn)淺析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-05-05
mvvm雙向綁定機制的原理和實現(xiàn)代碼(推薦)
下面小編就為大家?guī)硪黄猰vvm雙向綁定機制的原理和實現(xiàn)代碼(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-06-06
JS的事件循環(huán)執(zhí)行機制詳解
JS執(zhí)行是單線程的，它是基于事件循環(huán)的，那么本篇博文就來分享一下關于JS的事件循環(huán)執(zhí)行機制，感興趣的小伙伴可以跟著小編一起來學習
2023-05-05
加隨機數(shù)引入腳本不讓瀏覽器讀取緩存
不讓瀏覽器讀取緩存，故采用家隨機數(shù)方式引入腳本的方式，此法適用于及時刷新不讀緩存的情況
2014-09-09
javascript事件模型代碼
javascript事件模型代碼...
2007-07-07