我想从左至右在我的页面上有一个移动的背景图像，跟随网站 kxip.in ，请建议如何实现此目的。
谢谢&问候
解决方案一个有趣的问题与一个具有挑战性的解决方案。谢天谢地， stackoverflow 在这里可以帮助你完成你的工作！
显然，你将需要jQuery！所以，抓住一些jQuery然后回来。
回来？太棒了。
让我们开始吧。首先，将这一行添加到您的代码中：
$（function（）{ } ）那么，那是什么 $ magic东东？没关系，你真的知道了！我们在这里得到答案，而不是学习！但是，如果你是一个好奇的类型，打开一个新标签，并在stackoverflow上提出以下问题，这是什么 $（function（）{}）东东。有人会填补你的！不要忘记标记JQUERY！
好的，我们想为背景图片添加动画效果。 TOUGH 。当然，有很多方法可以做到这一点（HTML，CSS和JAVASCRIPT总是有不止一种方式来做到这一点！），但我更喜欢JQuery方式。请记住顶部有奇怪的美元符号？让我们回到那个！
$（function（）{ setInterval（function（）{ }，500）; }）！ setInterval是一个计数器，最多可以计算500毫秒，然后运行里面的代码。为什么500？我不知道，我只是喜欢幻数。所以我们有一个timerjiggymathing，我们需要更多的程序。
$ $ $（函数（）{ setInterval（function（）{ $（'body'）.css（'background-position'，'0 0'）; }，500）; }） pre>好吧，现在我们到了某个地方！我们的jQueries实际上现在将背景位置设置为0,0。还没那么有趣。
$（function（）{ var x = 0; setInterval（function（）{ x- = 1; $（'body'）。css（'background-position'，'0'+ x +'px'）; ），500）; }）让我们测试一下吧！
jsfiddle/hY5Dx/
哦，伙计。那图像太大了，愚蠢的小猫正在上升！返回代码。 $ $ $ $ $ $ $ $ $（$）$（$）$函数（）{ x- = 1; $（'body'）。css（'background-position'，x +'px 0'）; }，500）; }）
jsfiddle/hY5Dx/1/
啊，更喜欢它！但是，男人......非常缓慢。让我们升级它！
$（function（）{ var x = 0; setInterval（function （）{ x- = 1; $（'body'）。css（'background-position'，x +'px 0'）; }，10）; $）b $ bjsfiddle/hY5Dx/2/
OH SNAPPPPPP。我们现在有一些滚动kittenz！ JavaQuery 非常棒！说实话，那个背景图片并不公平。时间更新！
jsfiddle/hY5Dx/3 /
哦，是的，现在我们在踢！
有它！ 1，很多方法可以做你想做的事。
GOOD LUCK。有乐趣。
I would like to have a moving background image on my page from left to right exactly the same way as in following website kxip.in , please suggest how to achieve this.
Thanks & Regards
解决方案An interesting question with a challenging solution. Thankfully, stackoverflow is here to help you do your work!
Obviously, you'll need jQuery! So, grab some jQuery and then come back.
Back? Great.
Let's start off. First, add this bit of line to your code:
$(function(){ })So, what is that $ magic stuff? Nevermind you actually learning that! We're here to get answers, not learn! But, if you're the curious type, open up a new tab and ask the following question on stackoverflow, "what is this $(function(){ }) stuff". Someone will fill you in! Don't forget to tag JQUERY!
Ok, we want to animate a background image. TOUGH. Of course, there are a lot of ways to do this (HTML, CSS, and JAVASCRIPT always have more than one way to do this!) but I prefer the JQuery way. Remember that weird dollar signy stuff at the top? Let's go back to that!
$(function(){ setInterval(function(){ }, 500); })We just added some more programs! setInterval is a counter that counts up to 500 milliseconds and then runs the code inside. Why 500? I don't know, I just like magic numbers. So we have a timerjiggymathing, we need some more programs in it. How do we add a background?
$(function(){ setInterval(function(){ $('body').css('background-position', '0 0'); }, 500); })Ok, now we're getting somewhere! Our jQueries are actually now setting the background position to 0, 0. Not so interesting yet. Let's see if we can do some more.
$(function(){ var x = 0; setInterval(function(){ x-=1; $('body').css('background-position', '0 ' + x + 'px'); }, 500); })Let's test it out!
jsfiddle/hY5Dx/
Oh man. That image is way too big and the stupid kitten is going UP! Back to the codes.
$(function(){ var x = 0; setInterval(function(){ x-=1; $('body').css('background-position', x + 'px 0'); }, 500); })jsfiddle/hY5Dx/1/
Ahhh, more like it! But, man...is it awfully slow. Let's upgrade that!
$(function(){ var x = 0; setInterval(function(){ x-=1; $('body').css('background-position', x + 'px 0'); }, 10); })jsfiddle/hY5Dx/2/
OH SNAPPPPPP. We got some scrolling kittenz now! JavaQuery is AWESOME!
To be honest though, that background image isn't doing justice. Time to update that!
jsfiddle/hY5Dx/3/
Oh yeah, now we're kicking!!!
SO, there you have it! 1 of many, MANY ways to do what you want to do.
GOOD LUCK. HAVE FUN.
更多推荐
从左到右循环移动背景图像
发布评论