Question

我的图像宽度为4096px，屏幕宽度为960px。我必须创建连续的水运动。为此我使用32个图像的精灵我的代码如下

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Lets learn grammer</title>
    <script language="javascript" type="text/javascript" src="jquery.js"></script>
    <script>
    function moveBack(){
        var i=0;
        setInterval(function(){
            if(i<23){
                i++;
                $('#bck').css('background-position',((i)*-130));
            }else{
                //for(var j=0; j<=4;j++){
                    $('#bck').css('background-position',0);
                //}
                i=0;
            }
        }, 50); 
    }
    </script>
    <style type="text/css">
    #bck{
        position:absolute;
        width:960px;
        height:540px;
        background-image:url("water.png");
        background-repeat:repeat-y;
        top:0px;
        left:0px;
        border:1px solid red;
    }

    </style>
</head>
<body onload="moveBack()">
<div id="bck"></div>
</body>

此代码将整个精灵移动到结束点后停止。但我想继续运动，直到我停止执行。

谢谢

Answer 1

<head>     
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">     
<title>Lets learn grammer</title>     
<script language="javascript" type="text/javascript" src="jquery.js"></script>             
<script>     
function moveBack()
{         
        var i=0;         
        setInterval(function()
        {             
            //if(i<23){
                        i++;                 
                        $('#bck').css('background-position',((i)*-130));             
            //}
            //else{                 //for(var j=0; j<=4;j++){
            //$('#bck').css('background-position',0);                 
            //}                 i=0;             }         
        }, 50);
  }     
</script>     
<style type="text/css">     
#bck
{         
    position:absolute;         
    width:960px;         
    height:540px;         
    background-image:url("water.png");         
    background-repeat:repeat-x;         
    top:0px;         
    left:0px;         
    border:1px solid red;     
}      
</style> 
</head> 
<body onload="moveBack()"> 
<div id="bck"></div> 
</body>

这是你想要的吗？如果是，请注意更改：

更改setInterval（）
背景重复：重复-X;而不是background-repeat：repeat-y;

用jquery连续进行水运动

1 个答案: