javascript - 移动背景图像

Question

今天是个好日子！

如果有人可以帮助我解决我遇到的问题。我试图制作一个背景与此完全相同的网站。

http://clearairchallenge.com/

我真的很喜欢水平移动的背景图像（云）。我怎样才能做到这一点？

Answer 1

http://jsfiddle.net/LwPX6/

听到你有一个例子:)

var intval = null;
var pos = 0;

$(document).ready(function() {


    intval = window.setInterval(moveBg, 200);
});

function moveBg() {

    pos++;

    $(".clouds").css({backgroundPosition: (pos * 10) + "px 0px"});
}

问候 ：）

Answer 2

你可以尝试类似的东西

  $('#divId').animate(function() {
                backgroundPosition: '(-5000px 100px)'}, 5);
    });

这里背景 x 位置将在 5 秒内从 0 变为 -5000px，您可以更改时间和位置 px-s 以获得理想的结果。

更新你应该使用jquery库，你可以下载或在线使用

例如，从 url 使用，把它放在你的 head 部分

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>

你也应该写这个，无论是在头部还是在正文中，都没有关系，但是在前面的脚本标签之后什么是重要的

<script type="text/javascript">

    $(document).ready(function() {
         $('#divId').animate(function() {
                backgroundPosition: '(-5000px 100px)'}, 5);
    });

</script>

Answer 3

这么小的功能不需要jQuery！

尝试...

<script type="text/javascript">
    var pos = 0;

    window.setInterval(function(){
      pos++;
      document.getElementsByClassName('clouds')[0].style.backgroundPosition = pos + "px 0px";
    }, 50);
</script>

Swap out: getElementsByClassName('clouds')[0].stylefor getElementById('clouds').styleor I would attach it to the body so simple:body.style会做。