Native JS to implement sharing sidebar

This article shares a sharing sidebar implemented with native JS. The effect is as follows:

The following is the code implementation for your convenience to copy and paste.

<!DOCTYPE html>
<html>
 
<head lang="en">
    <meta charset="UTF-8">
    <title>Share to effect</title>
    <style>
        #share {
            position: fixed;
            width: 100px;
            height: 200px;
            background-color: lightblue;
            left: -100px;
            top: 100px;
        }
 
        #share span {
            width: 20px;
            height: 60px;
            line-height: 20px;
            text-align: center;
            left: 100px;
            top: 70px;
            position: absolute;
            background-color: yellow;
        }
    </style>
 
</head>
 
<body>
 
    <div id="share">
        <span>Share to</span>
    </div>
 
    <script>
        // Get the element var share = document.getElementById("share");
        // Set the event to share
        share.onmouseover = function () {
            animate(this, "left", 0);
        };
        share.onmouseout = function () {
            animate(this, "left", -100);
        };
 
        // animate motion function function animate(tag, attr, target) {
            clearInterval(tag.timer);
            tag.timer = setInterval(function () {
 
                // Get the current state of an attribute // Because it has units, it needs to be rounded // parseInt("hehe") => NaN NaN || 0
                // In order to deal with the problem of auto conversion to NaN, we use short-circuit operation to ensure the robustness of the program var leader = parseInt(getStyle(tag, attr)) || 0;
 
                // Part of the easing formula is changing the value of step var step = (target - leader) / 10;
 
                // Since offsetLeft will be rounded when taking values, if step is relatively small, it will cause problems with motion. // Change the rounding method according to the positive or negative number of steps. step = step > 0 ? Math.ceil(step) : Math.floor(step);
 
                // Easing formula leader = leader + step;
 
                // Set to a certain attribute tag.style[attr] = leader + "px";
 
                // Check if you have reached the specified position if (leader == target) {
                    clearInterval(tag.timer);
                }
            }, 17);
        }
 
        // Used to get the style attribute value of a tag // with unit function getStyle(tag, attr) {
            // Check which one is supported // box.currentStyle, if it does not exist, the value is undefined
            // getComputedStyle if the browser does not support it. This is equivalent to a variable not being declared, reporting an error if (tag.currentStyle) {
                // ie supports return tag.currentStyle[attr];
            } else {
                // Standard method return getComputedStyle(tag, null)[attr];
            }
        }
 
    </script>
</body>
 
</html>

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

Implement seamless scrolling in JavaScript and share to the sidebar example code
JS motion framework sharing sidebar animation example
How to implement the fixed effect of the blog sidebar module sliding with the scroll bar (js+jquery, etc.)
JavaScript to implement dynamic sidebar code
JavaScript to achieve a simple hidden sidebar function example
Detailed explanation of javascript implementation of dynamic sidebar example
Using js to write a responsive sidebar
JS implements the sidebar mouse over pop-up box + buffer effect
Implementing mobile sidebar sliding effects based on slideout.js
js+css to achieve full screen sidebar

<<: HTML table tag tutorial (31): cell width and height attributes WIDTH, HEIGHT

>>: A simple way to build a Docker environment