PC side web page effects

1, Element offset offset series

1. offset overview

Offset translates to offset. We can dynamically get the position (offset) and size of the element by using the relevant attributes of offset series

• Gets the distance of the element from the position with the positioning parent element
• Gets the size (width and height) of the element itself
• Note: the returned value has no units

offset series common attributes

attribute	effect
element.offsetParent	Returns the parent element with positioning as the element. If none of the parent elements are positioned, body is returned
element.offsetTop	Returns the offset of the element above the parent element with positioning
element.offsetLeft	Returns the offset of the parent element with the left border of the positioning parent element
element.offsetWidth	Returns the width of itself, including padding, border and content area. The returned value does not contain units
element.offsetHeight	Returns the width of itself, including padding, border and content area, and returns the value without unit

2. Difference between offset and style

1. offset can get the attribute value in any style sheet; Style can only get the style values in the inline style sheet
2. The value obtained by offset series has no unit; style.width gets a string with units
3. offsetWidth includes padding + border + width; style.width does not contain the value of padding + border
4. offsetWidth and other attributes are only readable and can only be obtained but not assigned; style.width is read-write and can be obtained or assigned

2, Element viewable area client series

Client is translated as the client. We use the relevant attributes of the client series to obtain the relevant information of the element visual area. Through the relevant attributes of the client series, we can dynamically obtain the border size and element size of the element

attribute	effect
element.clientTop	Returns the size of the top border of an element
element.clientLeft	Returns the size of the left border of an element
element.clientWidth	Returns the width of the content area, including padding, but excluding borders. The returned value does not contain units
element.clientHeight	Returns the width of the content area, including padding, but excluding borders, and returns a value without units

1. Execute function now

Functions that can execute themselves immediately without calling

grammar

(function() {})();  // The last parenthesis can be regarded as the meaning of the call, or you can add the function name
(function() {} ());

(function(a, b) 
 {
    console.log(a + b);
})(1, 2);
(function(a, b) 
 {
    console.log(a + b);
}(1, 2));

The biggest function of immediate execution function is to create a scope independently. All variables in it are local variables and will not conflict with external variables, avoiding the problem of naming conflict

2. pageshow event

This event is triggered when the page is displayed, regardless of whether the page is from the cache or not. In the reload page, pageshow will be triggered after the load event is triggered; Judge whether it is the pageshow event triggered by the page in the cache according to the persisted in the event object. Note: this event is added to the window

addEventListener('pageshow', function(e) {
    alert('hello');
    if (e.persisted)  // e.persisted returns true, which means the page is taken from the cache
    {
        console.log("Events retrieved in memory");
    }
})

3, Element scroll series

1. Element scroll series attribute

Scroll translates to rolling. We can dynamically get the size and rolling distance of the element by using the relevant attributes of the scroll series

attribute	effect
element.scrollTop	Returns the distance to the upper side of the rolled up, and returns the value without unit
element.scrollLeft	Returns the distance to the left of the rolled up, and returns the value without unit
element.scrollWidth	Returns its own actual width (content width), excluding borders, and returns a value without units
element.scrollHeight	Returns its actual width, excluding borders, and returns a value without units

4, Summary of three series

contrast:

• offsetWidth: returns the width of itself, including padding, border and content area. The returned value does not contain units
• clientWidth: returns itself, including padding and content area width, without borders, and returns a value without units
• scrollWidth: returns its actual width without borders, and returns a value without units

Main usage:

• The offset series is often used to obtain the element position: offsetLeft, offsetTop
• The client series is often used to obtain the element size: clientWidth, clientHeight
• scroll is often used to obtain the rolling distance: scrollTop and scrollLeft
• Note: the page scrolling distance passes through window Pagexoffset get

5, mouse

1. mouseenter mouse event

• The mouseenter event is triggered when the mouse moves over the element
• Similar to mouseover, the difference between them is
  • mouseover mouse will trigger when it passes through its own box and sub box. mouseenter will only be triggered through its own box
  • This is because mouseenter doesn't bubble
• Matched with mouseenter: the mouse will not bubble when leaving mouseleave

6, Animation function encapsulation

1. Animation implementation principle

Core principles:

• Continuously move the box position through the timer setInterval

Implementation steps:

1. Get the current position of the box
2. Add 1 movement distance to the current position of the box
3. Use the timer to repeat this operation continuously
4. Add a condition to end the timer
5. Note that this element needs to add positioning before you can use element style. left

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            position: absolute;
            left: 0px;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div></div>
    <script>
        // Animation principle
        // Get element location
        var div = document.querySelector("div");
        // Add a moving distance to the current position of the box
        // div.style.left = style.offsetLeft + 1 + "px";
        // Use the timer to repeat the above operation continuously
        var timer = setInterval(function()
        {
            if (div.offsetLeft >= 400)
            {
                // Stop animation, stop timer
                clearInterval(timer);
            }
            div.style.left = div.offsetLeft + 1 + "px";
        }, 30)
    </script>
</body>
</html>

2. Encapsulation of animation functions

Note that the function needs to pass two parameters, the animated object and the moving distance

// obj target object target location
function animate(obj, target) {
    // Let's say that the element has only one timer to execute; Clear the previous timer and only keep the current timer for execution
    clearInterval(obj.timer);  
    var timer = setInterval(function() {
        if (obj.offsetLeft >= target)
        {
            // Stopping animation is essentially stopping the timer
            clearInterval(timer);
        }
        obj.style.left = obj.offsetLeft + 1 + "px";
    }, 30)
    }
var div = document.querySelector("div");
// Call function
animate(div, 300);

3. Buffer animation principle

Buffering animation is to change the movement speed of elements. The most common is to stop the speed slowly

Idea:

1. Let the distance of each movement of the box slowly decrease, and the speed will slowly fall down
2. Core algorithm: (target value - current position) / 10 as the distance step of each movement
3. The stop condition is to stop the timer when the current box position is equal to the target position

// obj target object target location
function animate(obj, target) {
    // Let's say that the element has only one timer to execute; Clear the previous timer and only keep the current timer for execution
    clearInterval(obj.timer);  
    var timer = setInterval(function() {
        // The step value is written into the timer
        // Change our step value to an integer without decimal
        var step = (target - obj.offsetLeft) / 10;
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        if (obj.offsetLeft >= target)
        {
            // Stopping animation is essentially stopping the timer
            clearInterval(timer);
        }
        obj.style.left = obj.offsetLeft + step + "px";
    }, 30)
}
var div = document.querySelector("div");
// Call function
animate(div, 300);

Uniform Animation: the box is the current position + fixed value

Jog Animation: current position of the box + changed value ((target value - current position) / 10)

You can make animation functions from 800 to 500

When we click the button, we judge whether the step is positive or negative

1. If it is positive, the step size is rounded up
2. If it is negative, the step size is rounded down

4. Add callback function to animation function

Callback function principle: as a parameter, the function is passed to another function as a parameter. When the function is completed, the function passed in is executed. This process is called callback

function animate(obj, target, callback)
{  // Callback is the callback function
    // callback() when calling
    clearInterval(obj.timer);  
    var timer = setInterval(function() {
        var step = (target - obj.offsetLeft) / 10;
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        if (obj.offsetLeft >= target)
        {
            clearInterval(timer);
            // The callback function is written to the end of the timer
            // if (callback)
            // {
            	// Call the function. If there is no function, it will not be called
            //     callback();
            // }
            // You can also use
            callback && callback();
        }
        obj.style.left = obj.offsetLeft + step + "px";
    }, 30)
}
var div = document.querySelector("div");
// Call function
animate(div, 800, function() {
    alert("Hello World");
})

5. Throttle valve

Prevent the rotation chart button from playing too fast due to continuous clicking

Purpose of throttle valve: when the content of the previous function animation is executed, execute the next function animation, so that the event cannot be triggered continuously

Core idea: use callback function to add a variable to control, lock function and unlock function

vaar fflag = true;
div.addEventListener("click", function() {
    if (flag)
    {
        flag = false;  // Open the throttle
        animate(ul, 300, function() {
            flag = true;  // Close the throttle
        })
    }
})