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>