Question

所以我有一系列的图像如下：

   <div id="gallery-top-picture"><img src= "images/IMG_1786.jpg" width="125" height="125" border="1"></div>
   <div id="gallery-top-picture"><img src= "images/IMG_2178.jpg" width="125" height="125" border="1"></div>
   <div id="gallery-top-picture"><img src= "images/IMG_2196.jpg" width="125" height="125" border="1"></div>
  </div>
   <div class="gallery-content">
   <div id= "gallery-bottom-picture"><img src="images/IMG_2214.jpg" width="125" height="125" border="1"></div>
   <div id="gallery-bottom-picture"><img src= "images/IMG_2273.jpg" width="125" height="125" border="1"></div>
   <div id="gallery-bottom-picture"><img src= "images/IMG_2274.jpg" width="125" height="125" border="1"></div>
   <div id="gallery-bottom-picture"><img src= "images/IMG_2277.jpg" width="125" height="125" border="1"></div>
   <div id="gallery-bottom-picture"><img src= "images/IMG_2280.jpg" width="125" height="125" border="1"></div>

我希望当我单击其中一个时，另一个虚拟窗口出现在当前的一个上面，只有我点击它的图像，有人可以告诉我如何在javascript上执行此操作吗？感谢。

Answer 1

尝试将此<a>链接标记添加到您的图片中：

<a href="javascript:void window.open('YOUR-IMAGE.jpg', 'width=WIDTH,height=HEIGHT,toolbar=0,menubar=0,location=0,status=0,scrollbars=0,resizable=0');">IMAGE HERE</a>

...例如：

<div id="gallery-top-picture">
    <a href="javascript:void window.open('images/IMG_1786.jpg', 'width=250,height=250,toolbar=0,menubar=0,location=0,status=0,scrollbars=0,resizable=0');">
        <img src= "images/IMG_1786.jpg" width="125" height="125" border="1"/>
    </a>
</div>

Answer 2

试试这个

$("img").click(function(){
var src = $(this).attr("src");
window.open(src, "Image", "height=200,width=200");});

Answer 3

你也可以这样做，只需根据自己的喜好自定义css。单击图像，然后单击背景将其恢复为正常。

http://jsfiddle.net/sanpopo/9SqjL/

onclick="expand(this);"

您只需在图片标记上使用此功能

单击图像javascript使窗口显示出来

3 个答案: