JavaScript animation moves up and down, left and right, diagonally

CSS：

The top and left attributes can only be set after positioning

Add background: background: url(../img/login.jpg) no-repeat 0px 0px;

 <style>
        * {
            margin: 0;
            padding: 0;
        }
        html {
            height: 100%;
            width: 100%;
            overflow: hidden;
            /*定位父级*/
            position: relative;
        }
        
        .BOX1{
            top: 50px;
            left: 400px;
            background:  red;
            width: 170px;
            height: 145px;
            /*定位子级*/
            position: absolute;
        }

        .BOX2{
            top: 50px;
            left: 1200px;
            background: #70cefa;
            width: 170px;
            height: 145px;
            /*定位子级*/
            position: absolute;
        }

        .BOX3{
            top: 300px;
            left: 1750px;
            background: #79f56c;
            width: 140px;
            height: 125px;
            /*定位子级*/
            position: absolute;
        }

        .BOX4{
            top: 700px;
            left: 400px;
            background: darkcyan;
            width: 180px;
            height: 255px;
            /*定位子级*/
            position: absolute;
        }

        .BOX5{
            top: 600px;
            left: 1300px;
            background: darkred;
            width: 180px;
            height: 255px;
            /*定位子级*/
            position: absolute;
        }

        .BOX6{
            top: 400px;
            left: 1600px;
            background: midnightblue;
            width: 180px;
            height: 255px;
            /*定位子级*/
            position: absolute;
        }
    </style>

HTML：

Just add your own image to the div

<div class="BOX1" id="BOX1"></div>

<div class="BOX2" id="BOX2"></div>

<div class="BOX3" id="BOX3"></div>

<div class="BOX4" id="BOX4"></div>

<div class="BOX5" id="BOX5"></div>

<div class="BOX6" id="BOX6"></div>

JavaScript：

Define a variable i to control the angle of diagonal movement

The principle of diagonal movement is along the X-axis or Y-axis, one side moves fast and the other side moves slowly

Post, posl two variables calculate the margin by themselves

If you click to trigger the effect, add the button onclick attribute

<button onclick=" method name() "></button>

function method name(){

}

<script>
    //BOX1对角
    var elem1 = document.getElementById("BOX1");
    setInterval(BOX1, 1500/60);
    var post1 = 50;  //top
    var posl1 = 400; //left
    var i=2;
    var flag1 = true;
    function BOX1() {
        if(flag1 == true){
            post1++;
            posl1-=i;
            elem1.style.top = post1 + "px";
            elem1.style.left = posl1 + "px";
            //计算距离
            if (post1 == 290 || posl1 == 160 ) {
                flag1 = false
            }
        } else {
            post1--;
            posl1+=i;
            elem1.style.top = post1 + "px";
            elem1.style.left = posl1 + "px";
            if (post1 == 50 || posl1 == 400){
                flag1 = true
            }
        }
    }


    //BOX2对角
    var elem2 = document.getElementById("BOX2");
    setInterval(BOX2, 2000/60);
    var post2 = 50;  //top
    var posl2 = 1200; //left
    var i2=2;
    var flag2 = true;
    function BOX2() {
        if (flag2 == true){
            post2++;
            posl2+=i2;
            elem2.style.top = post2 + "px";
            elem2.style.left = posl2 + "px";
            //计算距离
            if (post2 > 300 ){
                flag2=false;
            }
        }else{
            post2--;
            posl2-=i2;
            elem2.style.top = post2 + "px";
            elem2.style.left = posl2 + "px";
            if (posl2 < 1200){
                flag2 = true;
            }
        }
    }

    //BOX3对角
    var elem3 = document.getElementById("BOX3");
    setInterval(BOX3, 2000/60);
    var post3 = 300;
    var posl3 = 1750;
    var i3=2;
    var flag3=true;
    function BOX3() {
        if (flag3 == true){
            post3--;
            posl3-=i3;
            elem3.style.top = post3 + "px";
            elem3.style.left = posl3 + "px";
            if (post3 < 20){
                flag3=false;
            }
        }else{
            post3++;
            posl3+=i3;
            elem3.style.top = post3 + "px";
            elem3.style.left = posl3 + "px";
            if (post3 > 300){
                flag3=true;
            }
        }
    }

    //BOX4上下
    var elem4 = document.getElementById("BOX4");
    setInterval(BOX4, 1500/60);
    var post4 = 700;
    var posl4 = 400;
    var flag4 = true;
    function BOX4() {
        if (flag4 == true){
            post4--;
            elem4.style.top = post4 + "px";
            elem4.style.left = posl4 + "px";
            if (post4 < 500){
                flag4 = false;
            }
        }else{
            post4++;
            elem4.style.top = post4 + "px";
            elem4.style.left = posl4 + "px";
            if(post4 > 700){
                flag4 = true;
            }
        }
    }

    //BOX5上下
    var elem5 = document.getElementById("BOX5");
    setInterval(BOX5, 1500/60);
    var post5 = 600;
    var posl5 = 1300;
    var flag5 = true;
    function BOX5() {
        if (flag5 == true){
            post5--;
            elem5.style.top = post5 + "px";
            elem5.style.left = posl5 + "px";
            if (post5 < 400){
                flag5 = false;
            }
        }else{
            post5++;
            elem5.style.top = post5 + "px";
            elem5.style.left = posl5 + "px";
            if(post5 > 600){
                flag5 = true;
            }
        }
    }

    //BOX6上下
    var elem6 = document.getElementById("BOX6");
    setInterval(BOX6, 1500/60);
    var post6 = 400;
    var posl6 = 1600;
    var flag6 = true;
    function BOX6() {
        if (flag6 == true){
            post6++;
            elem6.style.top = post6 + "px";
            elem6.style.left = posl6 + "px";
            if (post6 > 600){
                flag6 = false;
            }
        }else{
            post6--;
            elem6.style.top = post6 + "px";
            elem6.style.left = posl6 + "px";
            if(post6 < 400){
                flag6 = true;
            }
        }
    }

</script>

External style references:

CSS：<link rel="stylesheet" type="text/css" href="mystyle.css">

JS：<script src='*****.js'></script>

Final effect:

The second way to move diagonally:

Only valid for square diagonals

CSS:

<style>
    #container {
        width: 300px;
        height: 300px;
        position: relative;
        background: yellow;
        float: left;
    }
    #BOX1 {
        width: 50px;
        height: 50px;
        position: absolute;
        background-color: red;
    }
</style>

HTML:

<div id ="container">
    <div id ="BOX1">BOX1</div>
</div>

JS:

Define a variable pos to control the length and width

Define a variable to judge as true or false for looping 

<script>
    var elem1 = document.getElementById("BOX1");
    setInterval(BOX1, 1000/60);
     //BOX1对角
            var pos = 0;
            var flag = true;
            function BOX1() {
                if(flag==true){
                    pos++;
                    elem1.style.top = pos + "px";
                    elem1.style.left = pos + "px";
                    //计算距离
                    if (pos == 250 ) {
                        flag = false
                    }
                }else {
                    pos--;
                    elem1.style.top = pos + "px";
                    elem1.style.left = pos + "px";
                    if (pos == 0){
                        flag = true
                    }
                }
            }
</script>

Final effect:

It is relatively simple to write, I hope it can help you