js元素的震动效果代码实例
分类:实例代码
本章节分享一段代码实例,它实现了元素的震动效果。
代码实例如下:
<!DOCTYPE HTML> <html> <head> <meta charset="gb2312" /> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style type="text/css"> #win { position: relative; width: 100px; height: 100px; background-color: #666; } </style> <script type="text/javascript"> var a=['top','left']; var b=0; var u; function fudu(){ win.style[a[b%2]]=(b++)%4<2?"0px":"4px"; if(b>15){ clearInterval(u); b=0 } } function zd(){ clearInterval(u); u=setInterval(fudu,32) } window.onload=function(){ var bt=document.getElementById("bt"); var win=document.getElementById("win"); bt.onclick=zd; } </script> </head> <body> <input type="button" id="bt" value="查看效果"/> <div id="win"></div> </body> </html>
点击按钮就可以实现div元素的上下左右的抖动效果, 下面介绍一下它的实现过程。
一.代码注释:
(1).var a=['top','left'],创建一个数组,用来存储移动的方位。
(2).var b=0,声明一个变量并赋值为0,后面会用到。
(3).var u,声明一个变量u,后面会用到。
(4).function fudu(){},实现震动幅度。
(5). win.style[a[b%2]]=(b++)%4<2?"0px":"4px",通过三元运算符实现设置元素的top和left值的效果。
(6).if(b>15){
clearInterval(u);
b=0
},如果b大于15.那么就停止定时器函数的执行,也就是停止震动,然后将b设置为0。
(7).function zd(){
clearInterval(u);
u=setInterval(fudu,32)
},onclick事件的事件处理函数。
首先会停止上一次震动,防止连续点击按钮造成定时器函数叠加执行的现象。
二.相关阅读:
(1).三元运算符可以参阅javascript 三元运算符一章节。
(2).clearInterval()可以参阅clearInterval()一章节。
(3).setInterval()可以参阅setInterval()一章节。
js元素的震动效果代码实例,这样的场景在实际项目中还是用的比较多的,关于js元素的震动效果代码实例就介绍到这了。
js元素的震动效果代码实例属于前端实例代码,有关更多实例代码大家可以查看。