标签：function obj 鼠标 sliderbar 放上去 JS callback step con

.sliderbar {
            width: 200px;
            height: 40px;
            position: relative;
            margin: 0 auto;
        }

        .sliderbar span {
            display: inline-block;
            width: 50px;
            text-align: center;
            line-height: 40px;
            background-color: pink;
        }

        .con {
            display: inline-block;
            position: absolute;
            width: 150px;
            text-align: center;
            line-height: 40px;
            background-color: pink;
        }

<div class="sliderbar">
        <span>←</span>
        <div class="con">问题反馈</div>
    </div>

var sliderbar = document.querySelector('.sliderbar')
        var con = document.querySelector('.con')
        sliderbar.addEventListener('mouseenter', function () {
            animate(con, -150, function () {
                // 当动画执行完毕,就把箭头方向交换
                sliderbar.children[0].innerHTML = '→'
            })
        })
        sliderbar.addEventListener('mouseleave', function () {
            animate(con, 50, function () {
                sliderbar.children[0].innerHTML = '←'
            })
        })

还需要引入一个文件

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();
            // }
            callback && callback();
        }
        // 把里面的移动值改为慢慢变小的值
        obj.style.left = obj.offsetLeft + step + 'px'
    }, 15)
}

标签：function,obj,鼠标,sliderbar,放上去,JS,callback,step,con
来源： https://www.cnblogs.com/xf2764/p/12702991.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。