Js 页面元素 简单震动效果

效果预览:

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>

 

posted @ 2012-12-19 14:03  dtdxrk  阅读(1595)  评论(1)  编辑  收藏  举报