JavaScript实现窗口抖动效果

原理介绍

抖动其实是往复运动的一种特殊形式，只不过往复运动是一种无摩擦的无限运动，是以速度为基础的；抖动以该位置为参考，并最终停止在起始点

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

从起点开始，抖动元素先向右移动最大距离镜头，然后移动到对称的左侧位置；然后向右移动一点距离，再移动到左右对称的位置；在这个循环中，最后一个元素在起点停止

代码实现

代码实现中的抖动只不过是通过定时器定期改变左边或顶端的值

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

想法1

div.style.left=div.offsetLeft值；每次获取元素的当前样式，然后使用更改后的值进行操作

想法二

left=div.offsetLeft.div.style.left=左值；在计时器启动之前，获取元素的初始样式，然后使用更改后的值进行操作

从抖动实现的角度来看，使用第二种方法将距离的变化赋予值的变化相对简单

因此，代码实现的关键是理解值是如何变化的

假设最远距离为目标，同方向距离间隔为步长。如果数字更直观，值的值类似于4，-4，2，-2和0。因此，需要一个可变的dir来控制初始抖动方向，并且定时器应该在每次移动时改变dir

//定时器启动前变量声明dir=1；step=0；左边=div.offsetLeft//定时器代码值=dir*(目标-步骤)；if(step=target){ step=target } div . style . left=左值' px '；if(dir===-1){ step；} dir=-dir；将抖动效果打包为shakeMove.js

函数getCSS(obj，style){ if(window . getcomputed style){ return getcomputed style(obj)[style]；}返回obj . currentstyle[style]；}函数shakeMove(json){//声明要摇动的元素var obj=json.obj//声明元素jitter var target=json.target的最远距离；//默认值为20target=Number(目标)| | 20；//声明元素var attr=json.attr的变化样式；//默认值为' left ' attr=attr | | ' left//声明元素var dir=json.dir的起始抖动方向；//默认值为‘1’，表示先向右摇动dir=Number(dir)| |‘1’；//声明元素每个抖动的变化幅度。var step value=JSON . step value；步长值=数字(步长值)| | 2；//声明回调函数var fn=json.fn//声明步骤stepvar step=0；//保存style var的初始值attr value=parse float(getcss(obj，attr))；//声明参考值valuevar值；//清除定时器if(obj . timer){ return；}//启动计时器obj。timer=set interval(function(){//jitter核心代码值=dir *(target-step)；//如果(step=target) {step=target}当步长值大于或等于最大距离值target//更新样式值obj.style [attr]=attr值' px '；//当元素到达起点时，如果(step==target){ clear interval(obj . timer)停止计时器；obj . timer=0；//设置回调函数fn fn . call(obj)；}//如果此时运动反转，步长值在(dir===-1) {step=步长值；}//改变方向dir=-dir；},50);}示例应用程序

下面使用打包的shakeMove来实现一些简单的摇动应用

！DOCTYPE html html lang=' en ' hearta charset=' UTF-8 '标题文档/标题样式。测试{高度： 50px宽度： 50px绝对位置：top : 50px }/style/head dydiv id=' box ' div class=' test ' style=' left :10 px；背景：浅蓝色'/div div class=' test ' style=' left :70 px；背景：浅绿色'/div div class=' test ' style=' left :130 px；背景：粉色'/div div class=' test ' style=' left :190 px；背景：浅珊瑚色'/div div class=' test ' style=' left :250 px；背景：橙色'/div/div脚本src=' http :3358文件。cn博客。com/files/xiaohochai/shakemove。js '/脚本var ADiv=box。getelementsbytagname(' div ')；for(var I=0；i aDiv.lengthi ){aDiv[i].onmouseover=function(){ ShakeMoVE({ obj : this，attr : ' top ' })；} }/脚本/正文/html以上所述是小编给大家介绍的Java脚本语言实现窗口抖动效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！