CSS动画与JS交互实战-CSDN博客

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 100px;
            height: 100px;
            background-color: skyblue;
            position: absolute;
            top: 0;
            left: 10px;
        }
        div.box2{
            top: 210px;
            left: 400px;
        }
        p{
            border: 5px solid tomato;
            height: 300px;
            position: absolute;
            top: 0;
            left: 0;
        }
        p.par2{
            left: 500px;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <p class="par1"></p>
    <p class="par2"></p>
</body>
</html>

JS代码

    // 获取标签
    var box1 = document.querySelector('.box1')
    var box2 = document.querySelector('.box2')
    var timing // 定义定时器
    // 设置box1点击事件
    box1.onclick = () => {
        // 调用移动方法，并传递参数
        move(box1,400)
    }
    // box2点击事件
    box2.onclick = () => {
        move(box2,10)
    }
    // 封装运动函数
    function move(ele,end) {
        // 清除定时器，防止多次点击
        clearInterval(timing)
        // 创建定时器
        timing = setInterval(() => {
            // 获取起点位置
            var start = ele.offsetLeft
            // 定义步长，每次移动的距离为剩下距离的1/20
            var speed = (end-start)/10
            // 如果speed使正数则向上取整，负数向下取整
            speed = speed>0 ? Math.ceil(speed) : Math.floor(speed)
            // 做判断，条件满足直接一步到位（如果终点-起点 小于 步长）
            if(Math.abs(end-start) <= Math.abs(speed)) {
                ele.style.left = end + 'px'
                // 条件满足之后需要清除定时器
                clearInterval(timing)
            }else {
                // 如条件不满足则使left增加
                ele.style.left = start + speed + 'px'
            }
        }, 30);
    }

封装缓冲运动函数