2345技术员联盟

JS抖动效果:仿QQ聊天窗口抖动

  • 来源:电脑技术网 原创
  • 时间:2015-05-12
  • 阅读:
  • 本文标签:JS

本文给大家分享的是类似QQ窗口的抖动效果,只是觉得好玩,没什么技术含量,推荐给大家,有需要的小伙伴可以参考下。

<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>
本文来自电脑技术网www.it892.com),转载本文请注明来源.
本文链接:http://www.it892.com/content/web/js/051260192015.html
推荐阅读
热点排行
无觅相关文章插件,快速提升流量