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>
