Native JS realizes uniform motion of various sports

This article shares with you a uniform motion implemented with native JS, the effect is as follows:

It should be noted that this kind of motion effect is rarely used in actual development. Elastic motion and buffering motion are more commonly used. The following is the code implementation. You are welcome to copy, paste and comment.

<!DOCTYPE html>
<html>
 
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Native JS realizes uniform motion of various sports</title>
    <style>
        #div1 {
            width: 100px;
            height: 100px;
            position: absolute;
            background: red;
            left: 0;
            top: 50px;
        }
 
        span {
            width: 1px;
            height: 300px;
            background: black;
            position: absolute;
            left: 300px;
            top: 0;
        }
 
        ;
    </style>
    <script type="text/javascript">
 
        var timer = null;
        function startMove(iTarget) {
 
            var oDiv = document.getElementById('div1');
 
            clearInterval(timer);
            timer = setInterval(function () {
                var iSpeed = 0;
 
                if (oDiv.offsetLeft < iTarget) {
 
                    iSpeed = 7;
 
                } else {
 
                    iSpeed = -7;
                }
                //Has it reached the end point if (Math.abs(oDiv.offsetLeft - iTarget) < 7) {
                    //Reach the end point clearInterval(timer);
 
                    oDiv.style.left = iTarget + 'px';
                } else {
                    //Before arriving oDiv.style.left = oDiv.offsetLeft + iSpeed + 'px';
                }
            }, 30);
        }
    </script>
</head>
 
<body>
    <input type="button" value="Start movement" onclick="startMove(300)" />
    <div id="div1"></div>
    <span></span>
</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:

js specifies the step length to achieve uniform motion in one direction
Native javascript realizes uniform motion animation effect
Analysis of the implementation method of uniform motion in javascript
A brief discussion on the stopping conditions of uniform motion in Javascript
A brief discussion on how to achieve uniform motion with Javascript
JS code example to achieve uniform motion
JS uniform motion demonstration sample code
A detailed introduction to uniform motion and variable speed (buffered) motion in JavaScript

<<: Summary of discussion on nginx cookie validity period

>>: mysql 8.0.19 win10 quick installation tutorial