船长 发表于 2009-02-09 10:52 | 分类:javascript | 阅读数:608 次
让层抖动的效果,msn,qq窗体震动效果,可结合setTimeout做多种提示主意的应用,代码如下,运行可看到实际效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Language" content="zh-cn" /> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>让层抖动的效果,msn,qq窗体震动效果</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> <a href="http://www.songlecn.com">让层抖动的效果</a><br> </div> </div> </body> <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> </html>
提示:你可以先修改部分代码再运行。
您的网名: * 必填
电子邮件: * 绝不会泄露
个人主页:
评论内容:
(Ctrl+Enter快捷回复)
web集结号致力于