Home > Developer > JavaScript
JavaScript achieves window jitter and javascript window Jitter
Principles
Jitter is actually a special form of reciprocating motion, but reciprocating motion is an infinite motion without friction, and the speed is the reference; and jitter is the reference based on position, finally stop at the starting point
The most common jitter effect on the webpage should be the window jitter prompt.
The jitter element starts from the starting point, first moves the maximum distance from len to the right, then to the symmetric left position, and then moves a slightly smaller distance to the right, and then to the symmetric left position. In this cycle, the final element stops at the starting point.
Code Implementation
Jitter in code implementation is nothing more than making changes to the left or top values at intervals through the timer.
There are two ways to change distance in motion implementation.
Train of Thought 1
div.style.left = div.offsetLeft + value;
Obtain the current style of the element each time, and then calculate the changed value.
Train of Thought 2
left = div.offsetLeft;......div.style.left = left + value;
Obtain the initial style of the element before the timer is enabled, and then calculate the variable value.
In terms of jitter implementation, using the second method, the distance change is completely handed over to the value change for easy implementation.
Therefore, the key to code implementation is to understand how value changes.
Assume that the maximum distance is the target, and the distance between the two directions is step. If a number is used, the value is similar to 4,-4, 2,-2, and 0. Therefore, you also need a variable dir to control the start jitter direction. The timer must change the dir for each movement.
// Variable declaration before the timer is enabled dir = 1; step = 0; left = div. offsetLeft // code value = dir * (target-step) in the timer; 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];} return obj. currentStyle [style];} function shakeMove (json) {// declare the element var obj = json for jitter. obj; // declare the shortest range of element jitter var target = json.tar get; // The default value is 20 target = Number (target) | 20; // declare the variable style of the element var attr = json. attr; // The default value is 'left' attr = attr | 'left'; // declare the start jitter direction of the element var dir = json. dir; // The default value is '1', indicating that the first right jitter is started. dir = Number (dir) | '1 '; // declare the variation range of each jitter of the element var stepValue = json. stepValue; stepValue = Number (stepValue) | 2; // declare the callback function var fn = json. fn; // declare step stepvar step = 0; // Save the style Initial value var attrValue = parseFloat (getCSS (obj, attr); // declare the reference value valuevar value; // clear the timer if (obj. timer) {return;} // enable the timer obj. timer = setInterval (function () {// jitter core code value = dir * (target-step ); // if (step> = target) {step = target} when the step value is greater than or equal to the maximum distance value target // update the style value obj. style [attr] = attrValue + value + 'px '; // when the element reaches the starting point, stop the timer if (step = target) {clearInterval (obj. timer); obj. timer = 0; // set the callback function fn & fn. call (obj);} // if this is a reverse motion, the step size changes if (dir =-1) {step = step + stepValue ;} // change the direction dir =-dir;}, 50 );}
Instance application
The following uses the encapsulated shakeMove to implement some simple jitter applications.
<!DOCTYPE html>The above is the JavaScript implementation window jitter introduced by the small Editor. I hope it will help you. If you have any questions, please leave a message. The small editor will reply to you in time. Thank you very much for your support for the help House website!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
