发现一个有趣的东西js做的
类似QQ窗口的抖动效果,只是觉得好玩 没什么技术含量。
Code
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2<html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <style type="text/css">
6#body{}{text-align:center;}
7#test{}{width:119px;position:absolute;margin:10px auto;height:114px;background:url(http://www.blueidea.com/articleimg/2008/05/5766/01.jpg) ;border:2px dotted red;}
8 </style>
9 <script type="text/javascript"></script>
10 </head>
11 <body>
12 <div style='margin:10px 200px'>
13 <div><input type="button" value="~~~让我抖抖吧~~" onclick="nn.start()" /></div>
14 <div><input type="button" value="别抖了眼睛晕的很" onclick="nn.stop()" /></div>
15 <div id="test"></div>
16 </div>
17 </body>
18</html>
19<script type="text/javascript">
20 var m=document.getElementById("test");
21function SKclass (obj,Rate,speed) {
22 var oL=obj.offsetLeft;
23 var oT=obj.offsetTop;
24 this.stop=null;
25 this.oTime=null;
26 this.state=0;
27 var om=this;
28 this.start=function(){
29 if(this.state==0){
30 ostart();
31 this.state=1;
32 }
33 else{alert("这样你受得了吗?")}
34 }
35 var ostart=function(){
36 if(parseInt(obj.style.left)==oL-2){
37 obj.style.top=oT+2+"px";
38 setTimeout(function(){obj.style.left=oL+2+"px"},Rate)
39 }
40 else{
41 obj.style.top=oT-2+"px";
42 setTimeout(function(){obj.style.left=oL-2+"px"},Rate)
43 }
44 om.oTime=setTimeout(function(){ostart()},speed);
45 }
46 this.stop=function(){
47 clearTimeout(om.oTime);
48 this.state=0;
49
50 }
51}
52var nn=new SKclass(m,20,50);
53</script>
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2<html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <style type="text/css">
6#body{}{text-align:center;}
7#test{}{width:119px;position:absolute;margin:10px auto;height:114px;background:url(http://www.blueidea.com/articleimg/2008/05/5766/01.jpg) ;border:2px dotted red;}
8 </style>
9 <script type="text/javascript"></script>
10 </head>
11 <body>
12 <div style='margin:10px 200px'>
13 <div><input type="button" value="~~~让我抖抖吧~~" onclick="nn.start()" /></div>
14 <div><input type="button" value="别抖了眼睛晕的很" onclick="nn.stop()" /></div>
15 <div id="test"></div>
16 </div>
17 </body>
18</html>
19<script type="text/javascript">
20 var m=document.getElementById("test");
21function SKclass (obj,Rate,speed) {
22 var oL=obj.offsetLeft;
23 var oT=obj.offsetTop;
24 this.stop=null;
25 this.oTime=null;
26 this.state=0;
27 var om=this;
28 this.start=function(){
29 if(this.state==0){
30 ostart();
31 this.state=1;
32 }
33 else{alert("这样你受得了吗?")}
34 }
35 var ostart=function(){
36 if(parseInt(obj.style.left)==oL-2){
37 obj.style.top=oT+2+"px";
38 setTimeout(function(){obj.style.left=oL+2+"px"},Rate)
39 }
40 else{
41 obj.style.top=oT-2+"px";
42 setTimeout(function(){obj.style.left=oL-2+"px"},Rate)
43 }
44 om.oTime=setTimeout(function(){ostart()},speed);
45 }
46 this.stop=function(){
47 clearTimeout(om.oTime);
48 this.state=0;
49
50 }
51}
52var nn=new SKclass(m,20,50);
53</script>