JavaScript动画上下、左右、对角移动

和风微凉

已于 2023-10-24 17:45:36 修改

阅读量1.1k

点赞数

分类专栏： Web前端文章标签： javascript css html 1024程序员节

于 2022-07-22 10:16:21 首次发布

本文链接：https://blog.csdn.net/qq_45609680/article/details/125926672

版权

Web前端专栏收录该内容

9 篇文章 2 订阅

订阅专栏

CSS：

加了定位才能设置top，left属性

加背景：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：

给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：

定义一个变量 i 控制对角移动的角度

对角移动原理就是沿 X轴或 Y轴，一边移动速度快，一边移动速度慢

post，posl两个变量自己计算边距

点击触发效果的话加button onclick属性

function 方法名(){

}

<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>

外部样式引用：

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

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

最后效果：

对角移动第二种方法：

只对正方形对角有效

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:

定义一个变量pos控制长度和宽度

定义一个变量判断为true或false用来循环

<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>

最后效果：