animate dong

鲁_byg

于 2016-03-18 23:45:17 发布

阅读量313

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript

本文链接：https://blog.youkuaiyun.com/qq_34102108/article/details/50927561

javascript 专栏收录该内容

25 篇文章

订阅专栏

本文介绍了一个使用JavaScript实现的简单动画效果案例。通过监听按钮点击事件触发动画，利用定时器逐步改变元素的位置，实现了平滑过渡至指定位置的效果。文章详细展示了如何通过代码控制动画的速度与方向，并解决了动画过程中可能出现的抖动问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

btn2.onclick = function() {
    animate(box,400);
}
 // 自定义属性   object
//  基本封装
function animate(obj,target) {
    clearInterval(obj.timer);  // 要开启定时器，先清除以前定时器
 // 有2个参数 第一个 对象谁做动画  第二 距离 到哪里

    obj.timer = setInterval(function() {
        // 如果 offsetLeft 大于了  target 目标位置就应该反方向
        var speed = obj.offsetLeft < target ? 10 : -10;
        var result = target - obj.offsetLeft;  //  他们的值 等于 0 说明完全相等
        // 动画的原理
        obj.style.left = obj.offsetLeft + speed  + "px";
        if(Math.abs(result) == 0) {
           obj.style.left = target + "px";   //抖动问题
            clearInterval(obj.timer);
        }
    },30);
}