b站pink老师JavaScript的PC端网页特效案例代码——引用animate.js案例

快意人生大社畜

已于 2023-07-06 11:39:48 修改

阅读量599

点赞数 2

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

于 2022-09-11 18:38:39 首次发布

本文链接：https://blog.csdn.net/weixin_72322475/article/details/126806493

版权

JavaScript 专栏收录该内容

41 篇文章 0 订阅

订阅专栏

目标效果：

1.当鼠标进入（鼠标进入被选元素的时候mouseenter 不会冒泡）sliderbar小盒子（宽40px,高40px，里面有个span内容为⬅)的时候，con小盒子（宽200px,高40px)向左移动160px(con小盒子的宽200px-sliderbar小盒子的宽40px),当con小盒子移动完毕后，span中的⬅变为➡

初始状态：

当鼠标进入（鼠标进入被选元素的时候mouseenter 不会冒泡）sliderbar小盒子之后：

2.当鼠标离开（鼠标离开被选元素的时候mouseleave 不会冒泡）sliderbar小盒子（宽40px,高40px)的时候，con小盒子（宽200px,高40px)恢复初始状态，当con小盒子恢复初始状态后，span中的➡变为⬅

animate.js中

function animate(obj, target, callback) {
    //先清除之前的定时器，只保留当前的一个定时器
    clearInterval(obj.timer);
    obj.timer = setInterval(function () {
        // 1.步长值写在定时器里面 步长值=（目标值-现在的位置）/10
        var step = Math.ceil(target - obj.offsetLeft) / 10;
        //判断步长的正负
        // 如果步长为正，往大里取整 Math.ceil
        // 如果步长为负，往小里取整 Math.floor
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        // 2.当盒子位置=目标位置，停止定时器
        if (obj.offsetLeft == target) {
            //用停止定时器的方式 停止动画
            clearInterval(obj.timer);
            // 如果有回调函数，调用回调函数
            if (callback) {
                callback();
            }
        }
        // 3.把之前每次加1,改为一个慢慢变小的步长值 步长值=（目标值-现在的位置）/10
        obj.style.left = obj.offsetLeft + step + 'px';//记得加单位
    }, 15)
}