Detailed explanation of offset and constant speed animation in JS, and detailed explanation of jsoffset at constant speed

Detailed explanation of offset and constant speed animation in JS, and detailed explanation of jsoffset at constant speed
Introduction to offset

We know that three families are: offset, scroll, and client. Today, let's talk about offset and its associated constant speed animation.

Chinese characters of offset are: offset, compensation, and displacement.

In js, there is a convenient method to obtain the element size, namely the offset family. The offset family includes:

• OffsetWidth
• OffsetHight
• OffsetLeft
• OffsetTop
• OffsetParent

The following sections describe each other.

1. offsetWidth and offsetHight

It is used to detect the width and height of the box, padding, and border, excluding margin. As follows:

OffsetWidth = width + padding + border;

OffsetHeight = Height + padding + border;

These two attributes are bound to all node elements. After obtaining these attributes, we can call these two attributes to obtain the width and height of the element node.

Example:

<! DOCTYPE html> 
2. offsetLeft and offsetTop
Returns the position to the left of the upper-level box (with positioning). If none of the parent-level are located, the body prevails.
OffsetLeft: from the father's padding, the father's border does not count.
Example:
<! DOCTYPE html> 
When the parent box is located, offsetLeft = style. left (remove px ). Note that the latter only recognizes in-row styles. But the difference is not just that.
3. offsetParent
Detects parent box nodes with located characters in the parent box. The returned result is the parent of the object (with positioning ).
If the parent element of the current element does not have CSS positioning (position is absolute, relative, fixed), the return result of offsetParent is body.
If the parent element of the current element has CSS positioning (position is absolute, relative, and fixed), the return result of offsetParent is the closest parent element.
Example:
<! DOCTYPE html> 
Print result:

OffsetLeft and style. left
(1) The biggest difference is:
OffsetLeft returns the left-side distance from the unlocated box. If no position is found in the parent box, take the body as the standard.
Style. left can only obtain the intra-row style. If not, "" is returned (meaning, null is returned );
(2) offsetTop returns a number, while style. top returns a string with the unit: px.
For example:
div.offsetLeft = 100;div.style.left = "100px";
(3) offsetLeft and offsetTop read-only, while style. left and style. top can be read and written (read-only is the value to be obtained, and writeable is the value to be assigned)
(4) If the top style is not specified for the HTML element, style. top returns an empty string.
Conclusion: We generally use offsetLeft and offsetTop to obtain values, and use style. left and style. top to assign values (more convenient ). The reasons are as follows:
Style. left: only the intra-row type can be obtained. The obtained value may be null and NaN may easily appear.
OffsetLeft: It is very convenient to get the value and is a ready-made number for easy calculation. It is read-only and cannot be assigned a value.
Animation types

   
 
 
    
Flash (not required)
 
 
    
Constant Speed (focus of this article)
 
 
    
Easing (Subsequent key points)

   
A simple example is as follows: (500 ms at each interval, move the box 100px to the right)
<! DOCTYPE html> 
The effect is as follows:

Encapsulation of a uniform Animation: 30 ms at each interval, move the box 10px [important]
The Code is as follows:
<! DOCTYPE html> 
Implementation results:

The method encapsulation in the above Code can be used as a template step, remember. In fact, the encapsulation method is written as follows, which is more rigorous and easier to understand: (The if statement is improved)
// [Important] method encapsulation: Move the box to the right by 10px function animate (ele, target) every 30 ms. {// use a timer, first clear the timer // a box can only have one timer, so that there will be no timer conflict with other boxes // we can set the timer itself when it becomes an attribute clearInterval (ele. timer); // if we require the box to be both forward and backward, then our step must have positive and negative values. // if the target value is greater than the current value, if the target value is less than the current value, take negative var speed = target> ele. offsetLeft? 10:-10; // speed refers to the step size ele. timer = setInterval (function () {// get the difference between the current value and the target value before execution var val = target-ele. offsetLeft; // when moving, if the difference between the target value and the current value is smaller than the step size, it cannot be moving forward. // because the step size has positive and negative values, convert all values to absolute values to compare if (Math. abs (val) <Math. abs (speed) {// If val is smaller than the step size, it will directly reach the destination; otherwise, one step is moved each time. style. left = target + "px"; clearInterval (ele. timer);} else {ele. style. left = ele. offsetLeft + speed + "px" ;}}, 30 )}
Code example: Implementation of carousel Images
The full version of the Code is as follows: (annotations are already detailed)
<! Doctype html> 
Effect:

Tip: the animation size is too large.
Project files:
2012-02-02-jsanimated live streaming .rar