Question

每个人都过得愉快！

如果有人可以帮我解决我遇到的问题。我试图创建一个具有这样背景的网站。

我真的很想让背景图像（云）水平移动。我怎么能这样做？

Answer 1

听到你有一个例子：）

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库，你可以在线下载或使用

e.g。从网址使用，把它放在你的头部

<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>

对getElementsByClassName('clouds')[0].style换出getElementById('clouds').style或者我会将它简单地附在身上：body.style会这样做。

移动背景图像

3 个答案: