Jquery 使div的背景图像连续移动

以下是我在

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移动背景图像？我的函数有什么问题？

首先，jquery使用另一种CSS格式。它是

backgroundPosition

而不是

backgroundPosition

第二点，不是每10秒调用一次超时，而是调用.animate（）函数。比如：

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

---

第三：永远不要增加

x

。。在SetTimeout上执行x++操作。

首先，jquery使用另一种CSS格式。它是

backgroundPosition

而不是

backgroundPosition

第二点，不是每10秒调用一次超时，而是调用.animate（）函数。比如：

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

---

第三：永远不要增加

x

。。在SetTimeout上执行x++操作。

您似乎从未增加

x

变量。它始终具有值

0

…

您似乎从未增加

x

变量。它的值总是

0

。

我建议，在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:

我建议，在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:

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

函数slideBackground（）{
var background=document.getElementsByClassName（'background'）[0]；
var x=0；
setInterval（函数（）{
background.style.backgroundPosition=x+‘px 0’；
x++；
}, 10);
}
window.addEventListener（'load'，slideBackground，false）
.background{
排名：0；
左：0；
右：0；
z指数：1；
位置：绝对位置；
显示：块；
背景：url（'http://bit.ly/1NCb5xC');
背景重复：无重复；
背景尺寸：100px 150px；
宽度：100%；
身高：100%；
-webkit过滤器：模糊（3px）；
-moz滤波器：模糊（2px）；
-o-滤波器：模糊（5px）；
-ms过滤器：模糊（5px）；
过滤器：模糊（3px）；
}
我已经将您的jQuery脚本重写为普通的javascript，它似乎工作正常：


函数slideBackground（）{
var background=document.getElementsByClassName（'background'）[0]；
var x=0；
setInterval（函数（）{
background.style.backgroundPosition=x+‘px 0’；
x++；
}, 10);
}
window.addEventListener（'load'，slideBackground，false）
.background{
排名：0；
左：0；
右：0；
z指数：1；
位置：绝对位置；
显示：块；
背景：url（'http://bit.ly/1NCb5xC');
背景重复：无重复；
背景尺寸：100px 150px；
宽度：100%；
身高：100%；
-webkit过滤器：模糊（3px）；
-moz滤波器：模糊（2px）；
-o-滤波器：模糊（5px）；
-ms过滤器：模糊（5px）；
过滤器：模糊（3px）；
}
更像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);
    });
}());

更像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);
    });
}());

x
始终为0，请尝试在interval@kosmos我添加了x++，但它仍然无法使用
backgroundPosition
而不是
backgroundPosition
检查此：@kosmos-在这里很有魅力-感谢您让我知道lorempixel.com-非常好的资源…
x
始终为0，试着把1和它相加interval@kosmos我添加了x++，但它仍然无法使用
backgroundPosition
而不是
backgroundPosition
检查此项：@kosmos-在这里很有魅力-感谢您让我知道lorempixel.com-非常好的资源…您是对的，我忘了添加
x++
但它仍然无法移动你是对的，我忘了添加
x++
但它仍然无法在jQuery
.css（）中移动
方法
'background-position'
和
backgroundPosition
按预期工作。