缓动动画来回移动

最新推荐文章于 2025-12-31 17:15:11 发布

原创最新推荐文章于 2025-12-31 17:15:11 发布 · 121 阅读

CC 4.0 BY-SA版权

文章标签：

<!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>
</head>
<body>
    <div>
        李银河
    </div>
    <span>
        夏雨荷
    </span>
    <button class="btn1">夏雨荷走</button>
    <button class="btn2">到33</button>
</body>
</html>
<style>
    button{
        margin-top: 400px;
    }
    span{
        display: inline-block;
        width: 300px;
        height: 300px;
        background-color: orange;
        position: absolute;
        left: 0;
        top: 0;
        margin-top: 40px;
    }
    div{
        width: 300px;
        height: 30px;
        background-color: blue;
        position: absolute;
        left: 0;
        top: 0;
    }
</style>
<script>
    var btn1 = document.querySelector(".btn1")
    var btn2 = document.querySelector(".btn2")
    console.log(btn1);
    console.log(btn2);
    var span = document.querySelector('span')
    var div = document.querySelector('div')
    console.log(div);

    function animate(obj,target,callback) {
        clearInterval(obj.timer)
        obj.timer =  setInterval(function() {
            var step = (target - obj.offsetLeft) /10
            step = step > 0 ? Math.ceil(step) : Math.floor(step)
        if(obj.offsetLeft == target){
            clearInterval(obj.timer)
            if(callback){
                callback()
            }
        }
            obj.style.left = obj.offsetLeft + step  +  'px'
    },30)
    }
    btn1.addEventListener("click",function(){
        animate(span,800)
    })
    btn2.addEventListener("click",function(){
        animate(span,200,function(){
            span.style.backgroundColor = 'blue'
        })
    })
  
</script>