Checkout the jsFiddle

Question

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

谢谢＆amp;此致

Answer 1

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

显然，你需要jQuery！所以，抓住一些jQuery然后回来。

返回？大。

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

$(function(){

})

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

好的，我们想要为背景图像添加动画效果。 TOUGH 。当然，有很多方法可以做到这一点（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。我们现在有一些滚动的catsz！ JavaQuery太棒了！

说实话，那背景图片不公正。是时候更新了！

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

噢，是的，现在我们踢了!!!

所以，你有它！很多方法中的一种，可以做你想做的事。

好运。好运。好玩。

Answer 2

这是一个css解决方案：

<强> FIDDLE

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

很容易！只需使用一些简单的JavaScript！

Checkout the jsFiddle

<强>代码：

<html>
<head>
    <title>BackGround Slide</title>
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <script type="text/javascript">
         // speed in milliseconds
         var scrollSpeed = 70;

         // set the default position
         var current = 0;

         // set the direction
         var direction = 'h';

         function bgscroll() {

             // 1 pixel row at a time
             current -= 1;

             // move the background with backgrond-position css properties
             $('body').css("backgroundPosition", (direction == 'h') ? current + "px 0" : "0 " + current + "px");

         }

         //Calls the scrolling function repeatedly
         setInterval("bgscroll()", scrollSpeed);
    </script>
    <style type="text/css">
        body {
            background-image: url('http://kxip.in/images/mohalistadium.jpg');
        }
    </style>
</head>
<body>

</body>
</html>

Answer 4

使用一些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.
}

Answer 5

实现这一目标的最简单方法是相信使用一点点Javascript。你可以在这里找到他们用户使用的javascript作为例子： http://kxip.in/js/background-moving.js

 // speed in milliseconds
var scrollSpeed = 70;

// set the default position
var current = 0;

// set the direction
var direction = 'h';

function bgscroll() {

  // 1 pixel row at a time
  current -= 1;

  // move the background with backgrond-position css properties
  $('div.background-image').css("backgroundPosition", (direction == 'h') ? current+"px 0" : "0 " + current+"px");
}

//Calls the scrolling function repeatedly
setInterval("bgscroll()", scrollSpeed);

我敦促你不要简单地复制和粘贴，因为这可能不适合你。

Answer 6

您可以在HTML5中使用选框标记。您可以在http://www.quackit.com/html/codes/html_marquee_code.cfm中看到示例。

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

6 个答案:

Checkout the jsFiddle