显示部分图像

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>