Question

有没有办法同时在不同标签中缩放图像。我试图在标签上制作缩放效果。

在Here

中

我使用了 getElementById 函数。尽管使用这个，我必须同时缩放所有图像。

我尝试使用 getElementsByClassName ，但即使它无效。

有没有办法通过在点击该标签时动态地将ID设置为该pic标签来应用此功能？（在这种情况下可以单独缩放）

此处我还尝试在缩放功能上传递ID，但在放大不同标签BIN

时也会出现一些错误

Answer 1

您需要将图像存储在具有不同ID的div中。每页只能有一个具有相同ID的元素。我会添加一个函数来确定你所在的选项卡：

var currentTab = 0;
function switchTab(tabID) {
  currentTab = tabID;
  // code to load the tab's contents here
}

function zoom() {
  var img = document.getElementById("pic"+currentTab);
  // the rest of the zoom code goes here
}

<ul>
  <li onclick="switchTab(0);">Tab 1</li>
  <li onclick="switchTab(1);">Tab 2</li>
</ul>

<img id="pic0" src="firstpic.jpg" />
<img id="pic1" src="secondpic.jpg" />

如果你这样做，每个图像都应该正确缩放，因为现在只有第一个图像有效。只要跟上你所在的图像并给它们提供唯一的ID，它就可以正常工作。

以下是我制作的演示此功能的页面的链接：http://mdl.fm/f/zoom.html

在选项卡上缩放图像

1 个答案: