jquery运动之抖动效果

时间：7年前阅读：4970

　　抖动其实是往复运动的一种特殊形式，只不过往复运动是一种无摩擦力的无限运动，且以速度为参照依据；而抖动以位置作为参照依据，最终停在起始点

　　在网页中最常见的一种抖动效果应该是窗口抖动提示了

例如图下：

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,我们将及时处理。

微信扫码关注

更新实时通知

jquery运动之抖动效果

网友评论