jquery运动之抖动效果
抖动其实是往复运动的一种特殊形式，只不过往复运动是一种无摩擦力的无限运动，且以速度为参照依据；而抖动以位置作为参照依据，最终停在起始点
在网页中最常见的一种抖动效果应该是窗口抖动提示了
例如图下：
1、
2、
代码实现
抖动在代码实现上，无非就是通过定时器，每隔一段时间让left或top值进行变化
在运动实现中，有两种距离变化的思路
抖动元素从起始点开始，先向右移动最大距离len，然后移动到对称的左边位置；然后再向右移动稍微小一点的距离，再移动到对称的左边位置；以此循环，最终元素停止在起始点
将抖动效果封装为下载：ddsg.js
实例应用
下面利用封装的ddsg.js来实现一些简单的抖动应用
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .test{ height: 50px; width: 50px; position: absolute; top: 50px; } </style> </head> <body> <div id="box"> <div class="test" style="left:10px;background:lightblue"></div> <div class="test" style="left:70px;background:lightgreen"></div> <div class="test" style="left:130px;background:pink"></div> <div class="test" style="left:190px;background:lightcoral"></div> <div class="test" style="left:250px;background:orange"></div> </div> <script src="../js/jquery-1.11.3.min.js" type="text/javascript"></script> <script src="../js/ddsg.js" type="text/javascript"></script> <script type="text/javascript"> var aDiv = box.getElementsByTagName('div'); for(var i = 0; i < aDiv.length; i++){ aDiv[i].onmouseover = function(){ shakeMove({obj:this,attr:'top'}); } } </script> </body> </html> 原文链接：https://www.qiquanji.com/post/7017.html
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
微信扫码关注
更新实时通知