Rumah > Artikel > hujung hadapan web > JavaScript实现窗口抖动效果实例代码

JavaScript实现窗口抖动效果实例代码

怪我咯asal: 2017-07-04 15:14:532073semak imbas

抖动效果在各大网页上都常遇到，这篇文章主要介绍了JavaScript实现窗口抖动效果的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下

原理介绍

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

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

　　抖动元素从起始点开始，先向右移动最大距离len，然后移动到对称的左边位置；然后再向右移动稍微小一点的距离，再移动到对称的左边位置；以此循环，最终元素停止在起始点

代码实现

　　抖动在代码实现上，无非就是通过定时器，每隔一段时间让left或top值进行变化

　　在运动实现中，有两种距离变化的思路

思路一

p.style.left = p.offsetLeft + value;

　　每次都获取元素的当前样式，再与变化的value值进行运算

思路二

left = p.offsetLeft;
......
p.style.left = left + value;

　　在定时器开启之前，获取元素的初始样式，再与变化的value值进行运算

　　从抖动实现上来说，使用第二种方法，把距离变化完全交给value值变化来实现较为简单

　　所以，代码实现的关键就是了解value是如何变化的

　　假设最远距离为目标target，同方向的距离间隔为步长step。如果用数字更直观的表示，value的值类似于4、-4、2、-2、0。所以还需要一个变量dir来控制起始抖动方向，定时器每运动一次都要对dir进行更改

//定时器开启前的变量声明
dir = 1;
step = 0;
left = p.offsetLeft
//定时器里面的代码
value = dir*(target - step);
if(step >= target){
step = target
}
p.style.left = left + value + &#39;px&#39;;
if(dir === -1){
step++; 
}
dir = -dir;

　　将抖动效果封装为shakeMove.js

function getCSS(obj,style){
if(window.getComputedStyle){
return getComputedStyle(obj)[style];
}
return obj.currentStyle[style];
} 
function shakeMove(json){
//声明要进行抖动的元素
var obj = json.obj;
//声明元素抖动的最远距离
var target = json.target;
//默认值为20
target = Number(target) || 20;
//声明元素的变化样式
var attr = json.attr;
//默认为&#39;left&#39; 
attr = attr || &#39;left&#39;; 
//声明元素的起始抖动方向
var dir = json.dir;
//默认为&#39;1&#39;，表示开始先向右抖动
dir = Number(dir) || &#39;1&#39;;
//声明元素每次抖动的变化幅度
var stepValue = json.stepValue;
stepValue = Number(stepValue) || 2;
//声明回调函数 
var fn = json.fn;
//声明步长step
var step = 0;
//保存样式初始值
var attrValue = parseFloat(getCSS(obj,attr));
//声明参照值value
var value;
//清除定时器
if(obj.timer){return;}
//开启定时器
obj.timer = setInterval(function(){
//抖动核心代码
value = dir*(target - step);
//当步长值大于等于最大距离值target时
if(step >= target){
step = target
}
//更新样式值
obj.style[attr] = attrValue + value + &#39;px&#39;;
//当元素到达起始点时，停止定时器
if(step == target){
clearInterval(obj.timer);
obj.timer = 0;
//设置回调函数
fn && fn.call(obj); 
} 
//如果此时为反向运动，则步长值变化
if(dir === -1){
step = step + stepValue; 
}
//改变方向
dir = -dir; 
},50); 
}

实例应用

　　下面利用封装的shakeMove来实现一些简单的抖动应用

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.test{
height: 50px;
width: 50px;
position: absolute;
top: 50px;
} 
</style>
</head>
<body>
<p id="box">
<p class="test" style="left:10px;background:lightblue"></p>
<p class="test" style="left:70px;background:lightgreen"></p>
<p class="test" style="left:130px;background:pink"></p>
<p class="test" style="left:190px;background:lightcoral"></p>
<p class="test" style="left:250px;background:orange"></p>
</p>
<script src="http://files.cnblogs.com/files/xiaohuochai/shakeMove.js"></script>
<script>
var ap = box.getElementsByTagName(&#39;p&#39;);
for(var i = 0; i < ap.length; i++){
ap[i].onmouseover = function(){
shakeMove({obj:this,attr:&#39;top&#39;});
}
}
</script>
</body>
</html>

Atas ialah kandungan terperinci JavaScript实现窗口抖动效果实例代码. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：js图片轮播手动切换效果实例代码Artikel seterusnya：JS实现String转Date的方法介绍

Artikel berkaitan

Lihat lagi