显示图像的一部分答案

【问题标题】：Show part of an image显示图像的一部分
【发布时间】：2015-05-14 03:13:05
【问题描述】：

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

例子：

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

【问题讨论】：

您必须详细说明问题。
你可以使用 CSS 来做到这一点。
同意ThiefMaster，创建一个指定宽度和高度的DIV，并将图片设置为CSS中给定背景位置的背景图片

标签： javascript jquery image

【解决方案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/

【讨论】：

【解决方案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

【讨论】：

【解决方案3】：

如果您像这样将样式 overflow:hidden 添加到 div 中，Ivan 的示例将起作用..

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

【讨论】：