javascript抖动元素 

 1 <!doctype html>
 2 <html lang="zh">
 3 <head>
 4     <meta charset="utf-8">
 5     <title>xxxxxx</title>
 6     <style>
 7 
 8     #control {
 9         height: 100px;
10         width: 100%;
11         background: gray;
12     }
13     
14     </style>
15     <script>
16     function shake(e, onComplete, distance, interval)
17     {
18         if (typeof e === "string")
19         {
20             e = document.getElementById(e);
21         } // end if
22         distance = distance || 8;
23         interval = interval || 800;
24         
25         var originalStyle = e.style.cssText;
26         e.style.position = "relative";
27         var start = (new Date()).getTime();
28         
29         animate();
30         
31         function animate()
32         {
33             var now = (new Date()).getTime();
34             var elapsed = now - start;
35             var progress = elapsed / interval;
36             if (progress < 1)
37             {
38                 var y = distance * Math.sin(Math.PI * progress * 4);
39                 var x = distance * Math.cos(Math.PI * progress * 4);
40                 e.style.left = x + "px";
41                 e.style.top = y + "px";
42                 console.log(e.style.cssText);
43                 setTimeout(animate, Math.min(25, elapsed));
44             } // end if
45             else
46             {
47                 e.style.cssText = originalStyle;
48                 if (onComplete)
49                 {
50                     onComplete(e);
51                 } // end if
52                 
53             } // end else
54             
55         } // end animate()
56         
57     } // end shake()
58     
59     </script>
60 </head>
61 <body>
62 
63     <div id="control" onclick="shake(this);">
64     </div>
65 
66 </div>
67 
68 
69 
70 </body>
71 </html>

 

posted @ 2013-10-28 15:46  我的百科全书  阅读(313)  评论(0)    收藏  举报