http://jsfiddle.net/dtdxrk/P9gea/embedded/result/
看见类似的效果 自己动手写一个
就是padding + setTimeout让元素动起来 其实margin也行 调用的时候要注意元素的原始padding设置
1 <!DOCTYPE html> 2 <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta charset="utf-8" /> 5 <title>Js 页面元素 简单震动效果</title> 6 <style type="text/css"> 7 *{margin:0;padding:0;} 8 #box{ border:1px solid #000;width: 300px; height: 200px; cursor: pointer;margin: 200px auto;} 9 </style> 10 </head> 11 <body> 12 13 <div id="box"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" width="270" height="129"><br>点我试试</div> 14 15 <script type="text/javascript"> 16 17 document.getElementById("box").onclick = Shake; 18 19 function Shake(){ 20 var i = 20, 21 that = this; 22 23 var Timer = setTimeout(active,15); 24 25 function active(){ 26 if(i>=0){ 27 that.style.padding = 0; 28 i%2 == 0 ? that.style.paddingLeft = i + "px" : that.style.paddingRight = i + "px"; 29 i--; 30 Timer = setTimeout(active,15); 31 }else{ 32 clearTimeout(Timer); 33 }; 34 }; 35 36 } 37 38 </script> 39 </body> 40 </html>
860
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
