画像の一部を表示

Question

jQueryなどのJavaScript技術を使用して画像の一部を表示するにはどうすればよいですか？

例：

image: 
[    ] 
[  -------- ] 
[  -  - ] 
[  - part - ] 
[  -  - ] 
[  -------- ] 
[    ] 

Answer 1

thisのように、CSSプロパティbackgroundを操作：

#imgDiv { 
    background-image: url(image.jpg); 
    background-position: 10px 50px; /* Visible coordinates in image */ 
    height: 200px; /* Visible height */ 
    width: 200px; /* Visible width */ 
} 

はここで目に見える部分を.animateする方法は次のとおりです。http://jsfiddle.net/wGpk9/2/

Answer 2

あなたが固定サイズでdiv要素を使用することができます画像を絶対的に内側に置きます。あなたはそれを移動するために、画像の上/左/右/下の位置を変更するためにJavaScriptを使用することができます。

<div style="width: 100px; height: 50px; position: relative"> 
    <img src="path" alt="something" id="image" 
     style="position: absolute; top: 0px; left: 0px" /> 
</div> 

... 
<script type="text/javascript"> 
function moveImage() { 
    document.getElementById('image').style.top = '-100px'; 
} 
</script> 

EDIT：あなたが時間をかけて画像を移動する場合それは...だあなたはスタイルのオーバーフローを追加する場合、それ以外の場合は、単純にCSSを使用

Answer 3

イワンの例は動作しますので、同じようdiv要素に隠された..

<div style="width: 100px; height: 50px; position: relative; overflow: hidden;"> 
    <img src="path" alt="something" id="image" 
     style="position: absolute; top: 0px; left: 0px" /> 
</div> 

... 
<script type="text/javascript"> 
function moveImage() { 
    document.getElementById('image').style.top = '-100px'; 
} 
</script>