从左到右循环移动背景图像

Question

我想从左到右在我的页面上有一个移动的背景图像,与下面的网站http://kxip.in完全相同,请建议如何实现这一点.

感谢和问候

Answer 1

一个有挑战性的解决方案的有趣问题 值得庆幸的是,stackoverflow.com可以帮助您完成工作!

显然,你需要jQuery!所以,抓住一些jQuery然后回来.

背部？大.

让我们开始吧.首先,将这一行添加到您的代码中:

$(function(){

})

那么,那$神奇的东西是什么？没关系,你实际上是在学习它!我们来这里是为了得到答案,而不是学习!但是,如果你是一个好奇的类型,打开一个新标签,并在stackoverflow.com上询问以下问题,"这是什么$(function(){ })东西".有人会填写你!不要忘记标记JQUERY!

好的,我们想要为背景图像设置动画.TOUGH.当然,有很多方法可以做到这一点(HTML,CSS和JAVASCRIPT总是有不止一种方法来做到这一点!)但我更喜欢JQuery方式.还记得顶部有奇怪的美元标志吗？让我们回到那个!

$(function(){
    setInterval(function(){

    }, 500);
})

我们刚添加了一些程序!setInterval是一个计数器,最多可以计算500毫秒,然后在里面运行代码.为何500？我不知道,我只是喜欢神奇的数字.所以我们有一个timerjiggymathing,我们需要更多的程序.我们如何添加背景？

$(function(){
    setInterval(function(){
        $('body').css('background-position', '0 0');
    }, 500);
})

好的,现在我们到了某个地方!我们的jQuery实际上现在将背景位置设置为0,0.不太有趣.让我们看看我们是否可以做更多.

$(function(){
    var x = 0;
    setInterval(function(){
        x-=1;
        $('body').css('background-position', '0 ' + x + 'px');
    }, 500);
})

我们试一试吧!

http://jsfiddle.net/hY5Dx/

天啊.那个图像太大了,愚蠢的小猫正在上升!回到代码.

$(function(){
    var x = 0;
    setInterval(function(){
        x-=1;
        $('body').css('background-position', x + 'px 0');
    }, 500);
})

http://jsfiddle.net/hY5Dx/1/

啊,更喜欢它!但是,男人......是非常缓慢的.让我们升级吧!

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

http://jsfiddle.net/hY5Dx/2/

OH SNAPPPPPP.我们现在有一些滚动的catsz!JavaQuery太棒了!

说实话,那背景图片不公正.是时候更新了!

http://jsfiddle.net/hY5Dx/3/

哦是的,现在我们踢!

所以你有它!很多方法中的一种,可以做你想做的事情.

祝好运.玩得开心.

Answer 2

这是一个css解决方案:

小提琴

body {
    background: url(http://kxip.in/images/mohalistadium.jpg) repeat;
    -webkit-animation: loader 16s steps(100) infinite;
    -moz-animation: loader 16s steps(100) infinite;
    -ms-animation: loader 16s steps(100) infinite;
    -o-animation: loader 16s steps(100) infinite;
    animation: loader 16s steps(100) infinite;
}

@-webkit-keyframes loader {
  from {
    background-position: 0;
  }
  to {
    background-position: -1600px 0;
  }
}
@-moz-keyframes loader {
  from {
    background-position: 0;
  }
  to {
    background-position: -1600px 0;
  }
}
@-ms-keyframes loader {
  from {
    background-position: 0;
  }
  to {
    background-position: -1600px 0;
  }
}
@-o-keyframes loader {
  from {
    background-position: 0;
  }
  to {
    background-position: -1600px 0;
  }
}
@keyframes loader {
  from {
    background-position: 0;
  }
  to {
    background-position: -1600px 0;
  }
}

Answer 3

使用一些 js/jQuery：

function move(){
    var element = $('#selector');
    element .css('background-position-x', (parseInt(element.css('background-position-x') - 10));
    //Check if need to reset background-position-x to origin.
}