画像の一部を表示し、JavaScriptで画像の他の部分を見ることができるようにする

Question

私は、500x1000の画像を7960x8264で表示するプログラムを書くのに苦労しています。 W、S、A、およびDキーを使用してビューを移動できます。私はCSSのクリップ機能を認識しており、JSを使って修正しようとしました。何も動作していないようだし、私はそれに多くの時間を費やしたので、私は本当に経験豊かな人が手伝ってくれる必要があります。私は次のコードを実行しました：

私はthis stackoverflowの投稿を見ましたが、私はそれを再実装するのに苦労しています。助けのための

window.onkeypress = function(event) { 
 
     if (event.keyCode == 115) { 
 
      document.getElementById("container").style.clip = "rect(0px,5000px,5000px,0px)"; //this is supposed to change what part you see (the 'focus/view'), but it will actually move the view up in thw final program. 
 
     } 
 
     if (event.keyCode == 119) { 
 
      //move the view up 
 
     } 
 
     if (event.keyCode == 97) { 
 
      //move the view left 
 
     } 
 
     if (event.keyCode == 100) { 
 
      //move the view right 
 
     } 
 
    } 
 

 

 

 

#clip { 
 
    }

index.html: 
 

 
     <div id="container"> 
 
     <img src="img/game_resources/background/sky.jpg" /> 
 
     </div> 
 
     
 

感謝。

Answer 1

使用しようとしているクリッププロパティは、画像を元の場所に残し、表示される部分のみを変更します。また、クリップが機能するためには、要素はposition: absoluteまたはposition: fixedのいずれかでなければなりません。

移動する背景やスカイボックスのより伝統的なCSSのアプローチでは、コンテナに固定サイズを与え、<img />の代わりに背景イメージを使用します。その後、background-positionを使用してJavaScriptを使用して画像を移動することができます。あなたが<img />タグを使用する必要がある場合https://jsfiddle.net/3s9rkn3x/

の例はまた、あなたは画像をクリップして、position: absolute;とtop: yyypx、left: yyypxで容器内部の画像を配置するために、あなたのコンテナoverflow: hiddenを与えることができます。