Home > Article > Web Front-end > JavaScript implements window shaking effect

JavaScript implements window shaking effect

高洛峰Original: 2016-12-09 15:53:081709browse

Introduction to the principle

Jitter is actually a special form of reciprocating motion, except that reciprocating motion is an infinite motion without friction, and is based on speed; while jitter uses position as a reference, and finally stops at the starting point.

The most common jitter effect in web pages should be the window jitter prompt

JavaScript implements window shaking effect

The jitter element starts from the starting point, first moves to the right by the maximum distance len, then moves to the symmetrical left position; and then moves to the right Move a slightly smaller distance, and then move to the symmetrical left position; in this loop, the final element stops at the starting point

Code implementation

　Jittering in code implementation is nothing more than using a timer to let left or The top value changes

In the implementation of motion, there are two ideas for distance change

Idea 1

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

　Get the current style of the element each time, and then perform calculations with the changed value

Idea 2

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

　Before the timer starts, get the initial style of the element, and then calculate it with the changed value. From the perspective of jitter implementation, it is simpler to use the second method and completely leave the distance change to the value change. So, The key to code implementation is to understand how the value changes. Assume that the farthest distance is the target, and the distance interval in the same direction is the step. If expressed more intuitively with numbers, the value of value is similar to 4, -4, 2, -2, 0. Therefore, a variable dir is needed to control the starting shaking direction. The dir must be changed every time the timer moves

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

Encapsulate the shaking effect as 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); 
}

Instance application

Let’s use the encapsulated shakeMove to implement some Simple jitter app

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

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：An extremely simple requirejs implementation methodNext article：An extremely simple requirejs implementation method

See more

JavaScript implements window shaking effect

Related articles