0

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

このコードはスプライト全体をエンドポイントに移動し、その後停止します。しかし、実行を停止するまで連続して移動したいです。

ありがとう

4

1 に答える 1

0 
<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（）の変更
  • background-repeat：repeat-x; background-repeat：repeat-yの代わりに;
于 2012-09-18T09:39:57.470 に答える