JavaScript Realization window Jitter effect _javascript skill

Principle Introduction

Jitter is actually a special form of reciprocating movement, but the reciprocating motion is a kind of infinite motion without friction, and with the speed as the reference basis; and the jitter takes position as reference, and finally stops at the starting point

One of the most common dithering effects on a Web page should be a window jitter hint.

The jitter element starts at the starting point, moves the maximum distance len to the right, then moves to the symmetrical left position, then moves a slightly smaller distance to the right, and then moves to the symmetrical left position, where the end element stops at the starting point.

Code implementation

Jitter in code implementation, nothing more than through the timer, every time to let the left or top values to change

In the realization of motion, there are two ways to change the distance

Idea of a

Div.style.left = div.offsetleft + value;

Gets the current style of the element each time and then operates with the changed value value

Idea Two

left = Div.offsetleft;
......
Div.style.left = left + value;

Before the timer is turned on, get the initial style of the element and then perform the operation with the changed value value

From the jitter implementation, using the second method, the distance change completely to the value of change to achieve a relatively simple

So the key to the code implementation is to understand how value changes.

Let's assume that the farthest distance is targeted target, and the distance between the same direction is step steps. If a number is more intuitive, value is similar to 4,-4, 2,-2, 0. So you need a variable dir to control the starting jitter direction, and the timer changes to dir every time it moves.

Variable declaration of timer before opening
dir = 1;
Step = 0;
left = Div.offsetleft
//Timer inside code
value = dir* (target-step);
If (step >= target) {Step
= target
}
Div.style.left = left + value + ' px ';
if (dir = = 1) {
step++ 
}
dir =-dir;

Encapsulate the jitter effect as Shakemove.js

function Getcss (Obj,style) {if (window.getComputedStyle) {return getComputedStyle (obj) [style];
Obj.currentstyle[style]; The function Shakemove (JSON) {//declares the element var obj = Json.obj to be dithered;//Declare the furthest distance from the element jitter var target = json.target;//The default value is target = Nu Mber (target) | |
20;
Declares the change style of an element var attr = json.attr; Default is ' Left ' attr = attr | | 
' Left ';
Declares the starting jitter direction of the element var dir = Json.dir; The default is ' 1 ', which means to start shaking to the right first dir = number (dir) | |
' 1 ';
Declares the variable amplitude of each jitter of the element var stepvalue = Json.stepvalue; Stepvalue = number (Stepvalue) | |
2;
Declares the callback function var fn = Json.fn;
The declaration of step steps = 0;
Save style initial value var attrValue = parsefloat (Getcss (obj,attr));
Declare reference value var value; Clear Timer if (Obj.timer) {return;}//Open Timer Obj.timer = setinterval (function () {//jitter core Code value = dir* (target-step);//When step value is greater than
If (step >= target) {step = target}//Update style value obj.style[attr] = attrValue + value + ' px ' for maximum distance value target 
When the element arrives at the starting point, stop the timer if (step = = target) {clearinterval (obj.timer); obj.timer = 0;//Set the callback function fn && fn.call (obj); //If you are moving in reverse at this time, stepValue change if (dir = = 1) {step = step + stepvalue; 
//Change direction dir =-dir; 
},50); }

Instance Application

The following uses encapsulated Shakemove to implement some simple jitter applications

 <!
DOCTYPE html> 
 

The above is a small series of JavaScript to introduce the implementation of the window jitter effect, I hope to help you, if you have any questions please give me a message, small set will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!