显示图像的一部分

Question

如何使用jQuery或其他JavaScript技术显示图像的一部分？

例:

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

Answer 1

操纵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>

编辑：如果你想随时间移动图像......否则只需使用 CSS