顯示部分圖像

Question

如何使用jQuery或其他JavaScript技術顯示圖像的一部分？

例子：

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

Answer 1

操縱CSS屬性background，像this：

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

編輯：那是，如果你想搬過來時的圖像......否則，簡單地使用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>