Native JS realizes uniform motion of various sports

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

Recommend

Implement MaterialUI button click animation based on CSS and encapsulate it into a React component

Preface As a heavy user of front-end frameworks, ...

Webpack builds scaffolding to package TypeScript code

Create a folder Directory structure: dabaots Init...

The process of installing Docker on Windows Server 2016 and the problems encountered

Prerequisites To run containers on Windows Server...

A brief introduction to Vue filters, lifecycle functions and vue-resource

1. Filter Example: <!DOCTYPE html> <html...

Solution to Mysql binlog log file being too large

Table of contents 1. Related binlog configuration...

Summary of common MySQL table design errors

Table of contents Mistake 1: Too many columns of ...

js to implement a simple bullet screen system

This article shares the specific code of native j...

CentOS7 enables MySQL8 master-slave backup and daily scheduled full backup (recommended)

Note 1: Solve the problem of slow connection to M...

Detailed explanation of CSS3 elastic expansion box

use Flexible boxes play a vital role in front-end...

linux No space left on device 500 error caused by inode fullness

What is an inode? To understand inode, we must st...

Bootstrap 3.0 study notes grid system principle

Through the brief introduction in the previous tw...

Sample code for implementing markdown automatic numbering with pure CSS

The origin of the problem The first time I paid a...

How to manually build a new image with docker

This article introduces the method of manually bu...

Analysis of centos6 method of deploying kafka project using docker

This article describes how to use docker to deplo...

jQuery realizes the scrolling effect of table row data

This article example shares the specific code of ...