Javascript exercise detail_javascript skills

This article gives you a detailed description of how to use javascript to achieve motion effects. the summary is very comprehensive. the detailed examples and diagrams of various effects are attached. if you need them, you can refer to them. Moving principle: changes an object by changing its position.

Method:

1. use absolute positioning for moving objects
2. move an object by changing its properties (left, right, top, and bottom. For example, to move right or left, you can use offsetLeft (offsetRight) to control the left and right movements.

Steps:

1. before starting the movement, clear the existing timer (because it is a continuous click button, the object will move faster and faster, causing motion disorder)
2. enable the timer to calculate the speed.
3. separate motion and stop (if/else), judge the stop condition, and execute motion

1. timer

There are two dedicated functions for timers in javascrui:

1. countdown timer: timename = setTimeout ("function ();", delaytime );
2. cyclic timer: timename = setInterval ("function ();", delaytime );

Function () is the event function to be executed when the timer is triggered. it can be a function, several functions, or javascript statements, which can be separated by commas; delaytime is the interval, in milliseconds.

The countdown timer triggers events after a specified time, while the cyclic timer triggers events repeatedly when the time interval arrives. The difference is that the former only works once, while the latter does not stop acting.

The countdown timer is generally used when only one trigger is required on the page. for example, after clicking a button, the page jumps to the corresponding site after a certain time, it can also be used to determine whether a viewer is an "old customer" on your site. if not, you can jump to the corresponding site in 5 or 10 seconds, then, let him know that he can click a button in a certain place to quickly enter.

The cyclic timer is generally used for the effect that needs to be executed from the site. for example, a javascript scroll bar or status bar can also be used to represent the page background with a flying snow image. These events need to run every other time.

Sometimes we also want to remove some additional timers. at this time, we can use clearTimeout (timename) to disable the countdown timer, and use clearInterval (timename) to disable the cyclic timer.

II. Sports Research

1. Motion: Constant Motion (moving an object)

Timer usage
Add absolute positioning to DIV
OffsetLeft

Problem: The delimiter stops when a specific location is reached.
Solution: Make judgment and turn off the timer when the conditions are met (save the timer)
Slow speed (generally not moving time, but changing the number-speed)
Variable storage speed

Problem: p cannot stop when offsetLeft is not equal to 300 at 7.
Solution:> = 300 // stop at 301

Problem: After 300, click the button to continue.
Cause: click the button to execute the function and enable the timer (execute the current function at least once)
Solution: add else (executed before reaching the target)

Problem: continuous clicks, faster
Cause: each time you click, a timer is enabled, and several timers work at the same time.
Solution: ensure that only one timer works at a time, first cearlnterval ()

Example 1,

 ShareScript window. onload = function () {var oDiv = document. getElementById ('p1'); oDiv. onmouseover = function () {startMove (0) ;}; oDiv. onmouseout = function () {startMove (-150) ;};}; var timer = null; function startMove (iTarget) {var oDiv = document. getElementById ('p1'); clearInterval (timer); timer = setInterval (function () {var speed = 0; if (oDiv. offsetLeft> iTarget) {speed =-10;} else {speed = 10;} if (oDiv. offsetLeft = iTarget) {clearInterval (timer);} else {oDiv. style. left = oDiv. offsetLeft + speed + 'px ';}, 30);} script
Share

The effect is as follows:

Example 2: fade in and fade out:

 Fade in and outScript window. onload = function () {var oDiv = document. getElementById ('p1'); oDiv. onmouseover = function () {startMove (100) ;}; oDiv. onmouseout = function () {startMove (30) ;};}; var alpha = 30; var timer = null; function startMove (iTarget) {var oDiv = document. getElementById ('p1'); clearInterval (timer); timer = setInterval (function () {var speed = 0; if (alpha
 
  

 

The effect is as follows:

Stop condition for constant speed motion

Close enough

Example 3: The Stop condition of the uniform motion:

 Stop condition for constant speed motionScript var timer = null; function startMove (iTarget) {var oDiv = document. getElementById ('p1'); clearInterval (timer); timer = setInterval (function () {var speed = 0; if (oDiv. offsetLeft
 
  
  
  

  

  

 

2. variable speed (Buffering)

Gradually slow down and finally stop
The longer the distance, the higher the speed.
The speed is determined by distance.
Speed = (target value-current value)/scaling factor
If no scaling factor t is too fast, it will instantly reach the end. no process

Problem: It does not actually reach 300
Cause: The speed is only 0.9 // pixel, which is the maximum/J location displayed on the screen and will not be rounded off.
Math. ceil () rounded up
Math. floor () rounded down

Problem: walking left, another piece -- Math. floor ()
Judgment: Why is speed> 0? Math. ceil (speed): Math. floor (speed)

For example, buffer motion:

 Buffer motionScript function startMove () {var oDiv = document. getElementById ('p1'); setInterval (function () {var speed = (300-oDiv.offsetLeft)/10; speed = speed> 0? Math. ceil (speed): Math. floor (speed); oDiv. style. left = oDiv. offsetLeft + speed + 'px '; document. title = oDiv. offsetLeft + ',' + speed;}, 30);} script

The effect is as follows:

3. multi-object motion

Multiple p, move the mouse in to increase the width
The motion frame transmits the parameter obj to know which object is to be moved.
The buffer must be rounded up.

Problem: p does not move back // clear the previous timer
Cause: there is only one timer
Solution: add the timer on the object so that each object has a timer. Timer as object property

Multiple p fade-in and fade-out
First, disable the timer on the object.
Experience: Multi-Object motion frames cannot be shared by all things

Problem: not because of the timer, but because of alpha
Solution: attaching an object as an attribute/does not exist as a variable

Offset bug

Increase border width

OffsetWith is not the true width. it obtains the box model size.
Solution: hide the width and throw it between lines. parselnt (oDiv. style. width)

Further solution: getStyle (obj, name) currentStyle, getComputedStyle
Add border. if there is a problem with offset, remove offset.

For example, multi-object motion:

 Untitled DocumentScript window. onload = function () {var aDiv = document. getElementsByTagName ('P'); for (var I = 0; i0? Math. ceil (speed): Math. floor (speed); if (obj. offsetWidth = iTarget) {clearInterval (obj. timer);} else {obj. style. width = obj. offsetWidth + speed + 'px ';}, 30);} script

The effect is as follows:

4. any value movement

The units of any value movement are transparency and px.

Any value in px unit

 Untitled DocumentScript window. onload = function () {var oDiv1 = document. getElementById ('p1'); oDiv1.onmouseover = function () {startMove (this, 'height', 400) ;}; oDiv1.onmouseout = function () {startMove (this, 'height ', 200) ;}; var oDiv2 = document. getElementById ('P2'); oDiv2.onmouseover = function () {startMove (this, 'width', 400) ;}; oDiv2.onmouseout = function () {startMove (this, 'width ', 200) ;}; var oDiv3 = document. getElementByI D ('p3 '); oDiv3.onmouseover = function () {startMove (this, 'fontsize', 50) ;}; oDiv3.onmouseout = function () {startMove (this, 'fontsize ', 14) ;}; var oDiv4 = document. getElementById ('p4 '); oDiv4.onmouseover = function () {startMove (this, 'borderwidth', 100) ;}; oDiv4.onmouseout = function () {startMove (this, 'borderwidth ', 10) ;}}; function getStyle (obj, name) {if (obj. currentStyle) {return obj. currentStyle [name];} e Lse {return getComputedStyle (obj, false) [name] ;}} function startMove (obj, attr, iTarget) {clearInterval (obj. timer); obj. timer = setInterval (function () {var cur = parseInt (getStyle (obj, attr); var speed = (iTarget-cur)/6; speed = speed> 0? Math. ceil (speed): Math. floor (speed); if (cur = iTarget) {clearInterval (obj. timer);} else {obj. style [attr] = cur + speed + 'px ';}}, 30);} script
Higher
Widening
Safasfasd

The effect is as follows:

Any value of transparency needs to be determined:

Determine var cur = 0if (attr = 'Opacity ') {cur = parseFloat (getStyle (obj, attr )) * 100} else {} set the style judgment if (attr = 'Opacity ') {obj. style. fiIter = 'alpha (opacity: '(cur + speed) +') 'obj. style. opacity = (cur + speed)/100} else {}

5. chain movement

An extra parameter is called only when it is passed in.
Move the mouse to the width to bring up abc
Expand horizontally.
Move the mouse out, first become opaque, shorter, narrow

3. encapsulate the motion frame(Source code download: https://github.com/jingwhale/jsmove/blob/master/move.js)

Based on the above analysis and summary, the encapsulated motion framework move. js is as follows:

Function getStyle (obj, name) {if (obj. currentStyle) {return obj. currentStyle [name];} else {return getComputedStyle (obj, false) [name];} function startMove (obj, json, fnEnd) {clearInterval (obj. timer); obj. timer = setInterval (function () {var bStop = true; // assume that all values have reached for (var attr in json) {var cur = 0; if (attr = 'Opacity ') {cur = Math. round (parseFloat (getStyle (obj, attr) * 100);} else {cur = parseInt (ge TStyle (obj, attr);} var speed = (json [attr]-cur)/6; speed = speed> 0? Math. ceil (speed): Math. floor (speed); if (cur! = Json [attr]) bStop = false; if (attr = 'Opacity ') {obj. style. filter = 'alpha (opacity: '+ (cur + speed) +') '; obj. style. opacity = (cur + speed)/100;} else {obj. style [attr] = cur + speed + 'px ';} if (bStop) {clearInterval (obj. timer); if (fnEnd) fnEnd () ;}, 30 );}

The move. js motion framework basically meets all the current needs of animations on the webpage (excluding css3 ).

4. Application

1. Complete the following results:

The js code is as follows: