JavaScript achieves simple moving and easing effects

Table of contents

1. HTML layout

Simply define two boxes, one for moving effect and one for easing effect.

    <div class="box box1"></div>
	<div class="box box2"></div>

Two, CSS layout

Define the width, height and background color for the two boxes, and make any effect! Just watch it,

          <style>
		    *{
			 padding:0px;
			 margin:0px;
			}
		 .box{
			 width: 200px;
			 height: 200px;
			 background: blue;
			 position: absolute;
			 left:0px;
		 }
		 .box2{
			 background: red;
			 margin-top: 210px;
		 }
		 </style>

3. JavaScript Code - Mobile

1. Get elements

Get the elements defined in html just now and use them in js.

var box1 = document.querySelector('.box1');
var box2 = document.querySelector('.box2');

2. Encapsulate function to realize mobile

num: Define the box to move h1 pixels each time.

target: The distance of each movement.

If judgment: Judging by if, when the set distance is reached, the interval function will be deleted.

box.style.left: The distance is not reached, and it is always assigned to the left margin of the 'box'.

myRun: Design a click event for the box, and the click will cause movement. this points to box1, which contains the called value, which can be directly modified in it. The distance to move once is the total distance to move.

function myRun(box,h1,h2){ 
var myInter = setInterval(function(){
var offsetLeft = box.offsetLeft;
var num = h1;   
var target = h2;  
if(offsetLeft==target){  
		clearInterval(myInter);
	}else{
		box.style.left = offsetLeft+num+'px';
				}
	},1000)}
    box1.onclick=function(){
    myRun(this,50,200); }

moving effect

4. JavaScript code - easing

The code is roughly the same as that of js movement, and the intermediate judgment is slightly different from the above. The meaning is that the first movement takes one-tenth of the movement distance, and each subsequent movement, All take one-tenth of the remaining distance, rounded to make it possible to move when the wireless is close to the set distance.

 
             function move(obj,sum){
                var liLi = setInterval(function(){
                    var offsetLeft =obj.offsetLeft;
                    var num  = (sum - offsetLeft)/10;
                    num > 0 ?  Math.ceil(num):Math.floor(num);
                    if(offsetLeft==sum){
                        clearInterval(liLi);
                    }else{
                        obj.style.left = offsetLeft+num+'px';
                    }
                },1000)
             }   box2.onclick=function(){
                    move(this,200);
            }

easing effect

Five, complete code

1. Mobile Code

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>移动</title>
    <style>
        * {
            padding: 0px;
            margin: 0px;
        }

        .box {
            width: 200px;
            height: 200px;
            background: blue;
            position: absolute;
            left: 0px
        }

        .box2 {
            background: red;
            margin-top: 210px;
        }
    </style>
</head>

<body>
    <div class="box box1"></div>
    <div class="box box2"></div>
    <script>
        var box1 = document.querySelector('.box1');
        var box2 = document.querySelector('.box2');
        function myRun(box, h1, h2) {
            var myInter = setInterval(function () {
                var offsetLeft = box.offsetLeft;
                var num = h1;
                var target = h2;
                if (offsetLeft == target) {
                    clearInterval(myInter);
                } else {
                    box.style.left = offsetLeft + num + 'px';
                }
            }, 1000)
        }
        box1.onclick = function () {
            myRun(this, 50, 200);
        } 
    </script>
</body>

</html>

2. Slow motion effect

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>移动</title>
    <style>
        * {
            padding: 0px;
            margin: 0px;
        }

        .box {
            width: 200px;
            height: 200px;
            background: blue;
            position: absolute;
            left: 0px
        }

        .box2 {
            background: red;
            margin-top: 210px;
        }
    </style>
</head>

<body>
    <div class="box box1"></div>
    <div class="box box2"></div>
    <script>
        var box1 = document.querySelector('.box1');
        var box2 = document.querySelector('.box2');

        function move(obj, sum) {
            var liLi = setInterval(function () {
                var offsetLeft = obj.offsetLeft;
                var num = (sum - offsetLeft) / 10;
                num > 0 ? Math.ceil(num) : Math.floor(num);
                if (offsetLeft == sum) {
                    clearInterval(liLi);
                } else {
                    obj.style.left = offsetLeft + num + 'px';
                }
            }, 1000)
        } box2.onclick = function () {
            move(this, 200);
        }

    </script>
</body>

</html>