AutoCAD 3DMAX C语言 Pro/E UG JAVA编程 PHP编程 Maya动画 Matlab应用 Android
Photoshop Word Excel flash VB编程 VC编程 Coreldraw SolidWorks A Designer Unity3D
 首页 > JavaScript

JS实现仿QQ聊天窗口抖动特效

51自学网 http://www.wanshiok.com
javascript,QQ抖动,抖动层

JS实现仿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>

以上所述就是本文的全部内容了,希望大家能够喜欢。


javascript,QQ抖动,抖动层  
上一篇:AngularJS基础学习笔记之简单介绍  下一篇:javascript为按钮注册回车事件(设置默认按钮)的方法