Home >Web Front-end >JS Tutorial >JavaScript implementation of window jitter effect example code

JavaScript implementation of window jitter effect example code

怪我咯Original: 2017-07-04 15:14:532123browse

The jitter effect is often encountered on all major web pages. This article mainly introduces the relevant information on JavaScript to achieve the window jitter effect. It is very good and has reference value. Friends who need it can refer to it.

Principle introduction

Jitter is actually a special form of reciprocating motion, but reciprocating motion is a Infinite motion without friction, and 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

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

Code implementation

The dithering in the code implementation is nothing more than Through the timer, let the left or top value change every once in a while

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

Idea 1

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

Get the current style of the element each time, and then calculate it with the changed value

Idea 2

left = p.offsetLeft;
......
p.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, use the second method to completely leave the distance change to the value It is simpler to implement changes

Therefore, the key to code implementation is to understand how the value changes

Assume that the farthest distance is the target target, and the distance interval in the same direction is the step size. 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 initial shaking direction. The dir must be changed every time the timer moves.

//定时器开启前的变量声明
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;

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); 
}

Example Application

The following uses the encapsulated shakeMove to implement some simple shaking applications

<!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>

The above is the detailed content of JavaScript implementation of window jitter effect example code. For more information, please follow other related articles on the PHP Chinese website!

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：js image carousel manual switching effect example codeNext article：js image carousel manual switching effect example code

See more

JavaScript implementation of window jitter effect example code

Related articles