Js 页面元素 简单震动效果
生活随笔
收集整理的這篇文章主要介紹了
Js 页面元素 简单震动效果
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
效果預(yù)覽:
http://jsfiddle.net/dtdxrk/P9gea/embedded/result/
看見類似的效果 自己動手寫一個
就是padding +setTimeout讓元素動起來 其實(shí)margin也行 調(diào)用的時候要注意元素的原始padding設(shè)置
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>點(diǎn)我試試</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>
總結(jié)
以上是生活随笔為你收集整理的Js 页面元素 简单震动效果的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 设计模式之Adapter模式
- 下一篇： Java环境变量配置&解决版本不