1

我已经设法使用以下代码将图片打开到新窗口中的图片：

<IMG SRC="pic_small.jpg" onClick="view();">

<script language="JavaScript">

function view() {
imgsrc = "pic_big.jpg";


viewwin = window.open(imgsrc,'viewwin', 'width=600,height=300');    
}
</script>

我现在遇到的问题是我的网页上有更多图片，我不想为每个脚本编写另一个函数，而是为所有图片编写一个函数。换句话说，我希望有一个与上面做同样事情的脚本，但适用于所有这些（如果需要修改）HTML 行

<IMG SRC="pic1_small.jpg" onClick="view();">
<IMG SRC="pic2_small.jpg" onClick="view();">
<IMG SRC="pic3_small.jpg" onClick="view();">
<IMG SRC="pic4_small.jpg" onClick="view();">

我还想知道是否有某种方法可以使打开的窗口与大图片的大小相同。

4

3 回答 3

4

对于你的第一个问题

<IMG SRC="pic_small.jpg" onClick="view(this);">

<script language="JavaScript">
   function view(img) {
      imgsrc = img.src.split("_")[0] + "_big.jpg";
      viewwin = window.open(imgsrc,'viewwin', 'width=600,height=300');    
   }
</script>

更新

对于你的第二个问题，可以做到。

更新 2

这取决于您的图像名称保持相同的格式。或者，您可以这样做：

<img src="pic_small.jpg" onclick="view('pic_big.jpg')" />

<script type="text/javascript">
   function view(imgsrc) {
      viewwin = window.open(imgsrc,'viewwin', 'width=600,height=300'); 
   }
</script>
于 2012-11-27T23:22:24.290 回答
0

使用诸如 lightbox 之类的 js 库是一个不错的选择。它或多或少地满足您的要求。参见例如Lightbox 2

通过在您的 html 中包含 lightbox 和 jquery，您可以创建一个带有标签的图像列表，该标签具有“lightbox”的“rel”属性。当您单击图像周围的链接时，灯箱将自动激活。这是一个例子。

<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>

在上述链接的“如何使用”部分中查看更多示例

于 2012-11-27T23:21:53.763 回答
0

看看jQuery库，它几乎是 JS 的事实上的库。使用它你可以做类似的事情

$('img').click(function(){
  view($(this).attr('src'));
})


function view(small){
  var big = small.split("_")[0] + "_big.jpg";
  viewwin = window.open(imgsrc,'viewwin', 'width=600,height=300');    
}

这样，您的所有图像都将具有相同的行为

于 2012-11-27T23:24:42.647 回答