Analysis of offset and uniform motion examples in JS-JS Tutorial-php.cn

This article mainly introduces JavaScript animation to you: detailed explanation of offset and uniform animation (including the implementation of carousel images), and shares the implementation code. Friends who are interested can refer to it. I hope it can help everyone.

offset introduction

We know that the three major families include: offset/scroll/client. Today, let’s talk about offset and its related uniform animation.

offset in Chinese is: offset, compensation, displacement.

There is a convenient way to get the size of elements in js, which is the offset family. The offset family includes:

offsetWidth
offsetHight
offsetLeft
offsetTop
offsetParent

are introduced separately below.

1, offsetWidth and offsetHight

are used to detect the width and height + padding + border of the box itself, excluding margin. As follows:

offsetWidth = width + padding + border;

offsetHeight = Height + padding + border;

These two properties are bound to all node elements. superior. After getting it, we can get the width and height of the element node by calling these two properties.

Examples are as follows:

Copy after login

2, offsetLeft and offsetTop

Return the distance to the upper-level box (with positioning ); if the parent is not positioned, the body will prevail.

offsetLeft: Starting from the father’s padding, the father’s border does not count.

Example:

Copy after login

When the parent box is positioned, offsetLeft == style.left (after removing px). Note that the latter only recognizes inline styles. But the difference goes beyond that, as we’ll talk about later.

3. offsetParent

Detects the parent box node with positioning in the parent box. The returned result is the object's parent (with positioning).

If the parent element of the current element has no CSS positioning (position is absolute, relative, fixed), then the return result of offsetParent is body.

If the parent element of the current element has CSS positioning (position is absolute, relative, fixed), then the return result of offsetParent is the nearest parent element.

Example:

Copy after login

Print result:

##offsetLeft and style.left Difference

(1) The biggest difference is:

offsetLeft can return the position from the left side of the unpositioned box. If there is no positioning in the parent box, the body will prevail.

style.left can only get the inline style. If not, it will return "" (meaning, return empty);

(2) offsetTop returns a number, while style.top returns is a string, and also has the unit: px.

For example:

p.offsetLeft = 100; p.style.left = "100px";

Copy after login

(3) offsetLeft and offsetTop are read-only, while style.left and style.top are read-write (read-only is to get the value , writable is assignment)

(4) If the top style is not specified for the HTML element, style.top returns an empty string.

Summary: Our general approach is: use offsetLeft and offsetTop to obtain the value, and use style.left and style.top to assign the value (more convenient). The reasons are as follows:

style.left: Only inline styles can be obtained, and the obtained value may be empty, which is prone to NaN.

offsetLeft: It is particularly convenient to obtain the value, and it is a ready-made number, which is convenient for calculation. It is read-only and cannot be assigned a value.

Types of animation

##Constant speed (the focus of this article)
Easing (follow-up focus)
A simple example is as follows: (every 500ms, move the box 100px to the right)

Copy after login

The effect is as follows:

##Uniform speed animation encapsulation: every 30ms interval, move the box 10px [Important]

The code is as follows:

Copy after login

Achieved effect:

The method encapsulation in the above code can be used as a template step, so remember it. In fact, this encapsulation method, written as follows, will be more rigorous and easier to understand: (improved if statement)

//【重要】方法的封装：每间隔30ms，将盒子向右移动10px function animate(ele, target) { //要用定时器，先清除定时器 //一个盒子只能有一个定时器，这样的话，不会和其他盒子出现定时器冲突 //我们可以把定时器本身，当成为盒子的一个属性 clearInterval(ele.timer); //我们要求盒子既能向前又能向后，那么我们的步长就得有正有负 //目标值如果大于当前值取正，目标值如果小于当前值取负 var speed = target > ele.offsetLeft ? 10 : -10; //speed指的是步长 ele.timer = setInterval(function () { //在执行之前就获取当前值和目标值之差 var val = target - ele.offsetLeft; //移动的过程中，如果目标值和当前值之差如果小于步长，那么就不能在前进了 //因为步长有正有负，所有转换成绝对值来比较 if (Math.abs(val) < Math.abs(speed)) { //如果val小于步长，则直接到达目的地；否则，每次移动一个步长 ele.style.left = target + "px"; clearInterval(ele.timer); } else { ele.style.left = ele.offsetLeft + speed + "px"; } }, 30) }

Copy after login

Code example: Carousel chart The complete version of the code to achieve

is as follows: (the comments are already more detailed)

Copy after login

Achievement effect:

Related recommendations:

Detailed explanation of the difference between style.width and offsetWidth in js

Detailed explanation of the results of the offset character bypass vulnerability in php

The role and usage of market-offset in css

The above is the detailed content of Analysis of offset and uniform motion examples in JS. For more information, please follow other related articles on the PHP Chinese website!