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

Question

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

感谢和问候

Answer 1

一个有趣的问题和一个具有挑战性的解决方案。谢天谢地，stackoverflow.com在这里帮助您完成工作!

显然，您需要 jQuery!所以，捕获一些 jQuery 然后回来。

回来了吗？太好了。

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

$(function(){

})

那么，$ 神奇的东西是什么？没关系你真的学习了!我们来这里是为了获得答案，而不是学习!但是，如果您好奇，请打开一个新选项卡并在 stackoverflow.com 上提出以下问题，“这是什么 $(function(){ }) 东西”。有人会填补你!不要忘记标记 JQUERY!

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

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

    }, 500);
})

我们刚刚添加了更多程序! setInterval是一个计数器，最多计数500毫秒，然后运行里面的代码。为什么是 500？不知道，就是喜欢magic numbers .所以我们有一个 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。我们现在有一些滚动的小猫! JavaQuery 太棒了!

但老实说，背景图片并不公平。是时候更新了!

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

哦，是的，现在我们开始了!!!

所以，你有它!做您想做的事的许多方法中的一种。

祝你好运。玩得开心。