Question

这是我对body标记中div的css：

.background {
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;
    position: absolute;
    display: block;
    background: url('Queens-University.jpg');
    background-repeat: no-repeat;
    background-size: 100px 150px;
    width: 100%;
    height: 100%;

    -webkit-filter: blur(3px);
    -moz-filter: blur(2px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(3px);
}

我试图以连续的方式（无限）将此div的背景图像从左向右移动。

我正在尝试使用jQuery执行此操作但没有发生任何事情，这是我的代码：

$(window).load(function() { 
    var image = $('.background');
    var x=0;
    setInterval(function(){
        image.css('background-position', x + 'px 0');
        x++;
    }, 10);
});

如何使用jQuery移动背景图像？我的功能出了什么问题？

Answer 1

我可以建议，在2015年底，另一种方式，只使用CSS。

@keyframes animatedBackground {
    from { background-position: 0 0; }
    to { background-position: 100% 0; }
}
#animate-area   { 
    width: 560px; 
    height: 400px; 
    background-image: url(bg-clouds.png);
    background-position: 0px 0px;
    background-repeat: repeat-x;
    animation: animatedBackground 40s linear infinite;
}

Src：https://davidwalsh.name/demo/background-animation-css.php

Answer 2

我已经将您的jQuery脚本重写为普通的jilla javascript，它似乎工作正常：

function slideBackground() {

var background = document.getElementsByClassName('background')[0];
var x = 0;

setInterval(function(){
    background.style.backgroundPosition = x + 'px 0';
    x++;
    }, 10);

}

window.addEventListener('load',slideBackground,false);

.background {
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;
    position: absolute;
    display: block;
    background: url('http://bit.ly/1NCb5xC');
    background-repeat: no-repeat;
    background-size: 100px 150px;
    width: 100%;
    height: 100%;

    -webkit-filter: blur(3px);
    -moz-filter: blur(2px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(3px);
}

<div class="background">

</div>

Answer 3

您似乎永远不会增加x变量。它始终具有值0 ...

Answer 4

更多jQuery的做法，就是编写一个动画背景的插件

$.fn.animateBG = function(x, y, speed, callback) {
    var pos = this.css('background-position').split(' ');
    this.x  = pos[0] ? +pos[0].replace(/\D/g,'') : 0,
    this.y  = pos[1] ? +pos[1].replace(/\D/g,'') : 0,

    $.Animation( this, {
        x: x,
        y: y
    }, { 
        duration: speed
    }).progress(function(e) {
        this.css('background-position', e.tweens[0].now+'px '+e.tweens[1].now+'px');
    }).done(callback);

    return this;
};

然后在无限动画的递归函数中使用它

(function recursive() {
    $('.background').animateBG(100, 0, 1000, function() {
        this.animateBG(0, 0, 1000, recursive);
    });
}());

FIDDLE

Answer 5

首先，jquery使用另一种CSS格式。它是backgroundPosition而不是background-position。

第二点，不是每10秒调用一次超时，而是调用.animate（）函数。类似的东西：

setInterval(function() {
  $('.background').animate({backgroundPosition: imageWidth + ' 0'}, 1000);
}, 1000);

第三：你永远不会增加x ..在你的SetTimeout上做一个x ++。

使div的背景图像不断移动

5 个答案: