Question

我有一个div overflow=hidden;就像我在这里添加的那样。我有一些图像，一些在可见的div区域，一些在它之外（意味着如果div宽度为300，图像左边是500，所以你看不到图像）。我使用JavaScript函数更改图像位置（所有相互之间）。 如何在div区域加载图像（意思是：图像的顶部和左侧是div宽度和高度）？

我使用Generic Drag移动图像，就像 Generic Drag 中描述的那样。

<div id="mydiv" style="overflow=hidden; width: 300px; height: 300px; border: 1px solid #f00;">
    <img id="Img1" border="0"
         style="z-index: 10; position: absolute; visibility: visible; left: 481px; top: 347px; height: 15px; width: 16px;"
         src="house1.gif">
    <img id="Img2" border="0"
         style="z-index: 10; position: absolute; visibility: visible; left: 200px; top: 200px; height: 15px; width: 16px;"
         src="house1.gif">
    <img id="Img3" border="0"
         style="z-index: 10; position: absolute; visibility: visible; left: -50px; top: -50px; height: 15px; width: 16px;"
         src="house1.gif">
    <img id="Img4" border="0"
         style="z-index: 10; position: absolute; visibility: visible; left: 481px; top: 50px; height: 15px; width: 16px;"
         src="house1.gif">
    <img id="Img5" border="0"
         style="z-index: 10; position: absolute; visibility: visible; left: 50px; top: 60px; height: 15px; width: 16px;"
         src="house1.gif">
</div>

Answer 1

添加相对于div的位置，您可以跟踪图像位置的位置（顶部/左侧），当图像在范围内时，将src属性添加到您的img属性中。

我建议使用jQuery，因为它会为您提供更多功能和更多浏览器支持 drag and drop 。

示例：

<img id="Img1" border="0" style="z-index: 10; position: absolute; visibility: visible;
            left: 481px; top: 347px; height: 15px; width: 16px;" deffered="house1.gif">

JavaScript代码：

// If image is in range.
var image = $('Img1');
image.attr('src',image.attr('deffered'));

这应该有用。

Answer 2

试试这个，

<div id="mydiv" style="overflow:hidden; min-height:300px; min-width:300px;  border: 1px solid #f00;">
      <img id="Img1" border="0" style="z-index: 10; 
            left: 481px; top: 347px; height: 400px; width: 400px;" src="...">
  </div>

如何在div区域加载图像？

2 个答案: