用js封装一个动画函数_h5中js中animate函数参数动画-CSDN博客

本文链接：https://blog.csdn.net/qq_52138438/article/details/115028531

用Js封装好一个animate函数实现像HTML5那样的功能
function animate (obj,target,callback){} 三个参数分别传入调用函数的标签（对象）移动多少距离动画结束后执行什么操作（回调函数）第三个也可不写

function animate (obj,target,callback){
    //callback = function(){} 调用的时候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();
            }
        }
        // 把每次加1 这个步长值改为一个慢慢变小的值 步长公式：(目标值 - 现在位置)/10
        obj.style.left = obj.offsetLeft + step + 'px';
    },15);
}

我们来使用一下它
这个案例就是页面中经常看到的箭头滑入滑出的写法

<!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>
        .sliderbar{
            position: relative;
            width: 200px;
            height: 40px;
            float: right;
            padding-left: -180px;
            overflow: hidden;
        }
        .con{
            right: -160px;
            position: absolute;
            background-color: purple;
            height: 40px;
            line-height: 40px;
            width: 200px;
            text-indent: 1em;

        }
        span{
            right: 0px;
            position: absolute;
            line-height: 40px;
            color: #fff;
            height: 40px;
            width: 40px;
            background-color: blue;
            z-index: 1;
        }
    </style>
    <script src="animate.js"></script>
</head>
<body>
    <div class="sliderbar">
        <span><—</span>
        <div class="con">问题反馈</div>
    </div>
    <script>
        //当我们鼠标经过 sliderbar 就会让 con 这个盒子滑动到左侧
        //当我们鼠标离开 sliderbar 就会让 con 这个盒子滑动到右侧
        var sliderbar = document.querySelector('.sliderbar');
        var con = document.querySelector('.con');
        sliderbar.addEventListener('mouseleave',function(){
            animate(con,160,function(){
                //当我们动画执行完毕，就把箭头改变
                sliderbar.children[0].innerHTML = '<-';
            })
        })
        sliderbar.addEventListener('mouseenter',function(){
            animate(con,0,function(){
                //当我们动画执行完毕，就把箭头改变
                sliderbar.children[0].innerHTML = '->';
            })
        })
    </script>
</body>
</html>