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

Ivan的例子有效，如果你添加样式溢出：隐藏到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>

显示图像的一部分

3 个答案: