Question

我有一个背景图片（宽度= 2000像素，高度= 400像素），坐在宽度和高度等于400像素的div后面。我的图像被分成5个块，所有块的宽度和高度都等于400px。每次调用函数模拟GIF图像时，我希望我的图像移动400px。

    var imageWidth = $("#imageScroll").width();
            console.log(imageWidth);

    var timer = setInterval(function(){ shiftImage() }, 250);

    function shiftImage(){
            $("#imageScroll").mouseover (function(){
                $("#imageScroll").css({"background-position-x": (imageWidth)});
            });
        };
});

这是我的jQuery代码，我尝试过很多不同的代码并且失败了。 imageScroll是我想要推送图像的div的ID。

Answer 1

你必须定义图像的css，以便它在x轴上重复。

<style>
    #imageScroll{
        height: 400px;
        width: 500px;
        background-image: url('./background.jpg');
        background-repeat: repeat-x;
    }
</style>

然后，在页面底部或正文载入中，您应该执行以下指示。

intervalFunc = setInterval(shiftImage, 250);

function shiftImage(){
    var currentBackgroundX = $('#imageScroll').css('background-position-x');
    split = currentBackgroundX.split("%");
    currentBackgroundX = split[0];
    currentBackgroundX = parseInt(currentBackgroundX);
    $('#imageScroll').css({"background-position-x": (currentBackgroundX + 25) + '%'});
}

我实际上并没有给定位部分太多，因为这是一个完全不同的主题。但我在这里尝试做的是，每250毫秒将background-position-x改变25％。您可以更改shiftImage函数的内部工作方式。

如果您想在任何时候停止动画，只需运行

即可

clearInterval(intervalFunc);

希望这有帮助

修改：jsFiddle

编辑2：编辑的小提琴链接

编辑3：编辑的小提琴链接

如何让JS函数自己执行

1 个答案: