缓动动画案例 - 控制台停不了的原因

最新推荐文章于 2024-07-09 10:38:13 发布

古古外

最新推荐文章于 2024-07-09 10:38:13 发布

阅读量289

点赞数

分类专栏： JavaScript 文章标签：动画 javascript 前端

本文链接：https://blog.csdn.net/abcccc1111901/article/details/123120081

版权

<style>
        div {
            position: absolute;
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }

        span {
            top: 300px;
            position: absolute;
            width: 100px;
            height: 100px;
            background-color: purple;
        }
    </style>
</head>

<body>
    <button>点击夏雨荷才走</button>
    <div></div>
    <span>夏雨荷</span>
    <script>
        function animate(obj, target) {
            clearInterval(obj.timer);//清除以前的定时器只保留一个定时器，以防多次按按钮时对象速度变快。
            obj.timer = setInterval(function () {
                //1.步长值写到定时器的里面
                var step = (target - obj.offsetLeft) / 10;
                if (obj.offsetLeft >= target) {//注意：这里不能用obj.style.left,因为他返回的是字符串
                    clearInterval(obj.timer);
                    console.log(obj.style.left)