如何使用js的计时器来让一个div背景从左向右移动全部代码

Question

如题所述

Answer 1

你好，给你写了一个很基础的例子。参照着自己优化成你想要的效果吧。

示例是这样的，鼠标移动到div上，背景图片会从左往右移动直至最右端。鼠标移出div，背景图标从右往左直至最左端。

备注：考虑到宽度变化，本例背景图片使用百分比定位。根据你的实际情况也可改为使用像素(px)定位。

<style>
.bg-div {
    height: 110px;
    background: url(https://gss0.bdstatic.com/7Ls0a8Sm1A5BphGlnYG/sys/portrait/item/27267a776a746b7505.jpg) 0% center no-repeat #ccc;
}
</style>
<div id="J_BgDiv" class="bg-div"></div>
<script>
(function() {
    var div = document.getElementById('J_BgDiv');
    // 背景百分比（从左至右，0%-100%）
    var pos = 0;
    // 背景向右移还是向左移（0：向右，1：向左）
    var dir = 0;
    // 每次移动的百分比，控制速度
    var step = 3;
    div.addEventListener('mouseover', function() {
        var node = div;
        dir = 0;
        if (!div.mover) {
            div.mover = setInterval(function() {
                // 每次移动10%
                if (dir === 0) {
                    pos += step;
                } else {
                    pos -= step;
                }
                pos = pos >= 100 ? 100 : pos;
                pos = pos <= 0 ? 0 : pos;
                node.style.backgroundPosition = pos + '% center';
            }, 20);
        }
    }, false);

    div.addEventListener('mouseout', function() {
        dir = 1;
    }, false);
})();
</script>

希望能帮你解决问题，如有疑问可以追问。