Question

我通过按钮和鼠标滚轮功能进行了简单的放大和缩小功能。主要概念是限制最大缩放级别和最小缩放级别。

我已成功地以两种方式成功

但我尝试在具有唯一ID或类别的标签部分中进行此操作。

我的剧本

 var zoomLevel = 100;
 var maxZoomLevel = 150;
 var minZoomLevel = 50;
 var initW=0,initH=0;

 function zoom(zm) {
var img=document.getElementById("pic");
if(zm > 1){
    if(zoomLevel < maxZoomLevel){
        zoomLevel+=10;
    }else{
        return;
    }
}else if(zm < 1){
    if(zoomLevel > minZoomLevel){
        zoomLevel-=10;
    }else{
        return;
    }
}
img.style.width = (initW*zoomLevel/100)+"px";
img.style.height = (initH*zoomLevel/100)+"px";
img.style.marginLeft = ((initW-img.width)/2) + "px";
img.style.marginTop = ((initH-img.height)/2) + "px";
}

window.onload=function(){
 var img=document.getElementById("pic");
 initW=img.width;
 initH=img.height;
 img.onmousewheel=function(e){
e=e||window.event;
if(e.wheelDelta>=120) zoom(1.1);
else zoom(0.9);
};
if(/Firefox/.test(navigator.userAgent)){
img.addEventListener("DOMMouseScroll",function(e){
  if(e.detail<0) zoom(1.1);
  else if(e.detail>0) zoom(0.9);
  e.preventDefault();
 },false);
 }
 };

这里我通过使用 GetElementById 来访问我的图片代码来获取我的元素是否有办法访问其他标签中的所有img标签。

我还尝试了 getElementsbyClassName ，但它只是检索节点列表而不能正常工作。

如何在此处访问所有三张图片

当前BIN

Answer 1

您需要使用不同的ID

var img=document.getElementById("pic1");
var img=document.getElementById("pic2");`

Answer 2

您已为所有三张图片分配了相同的ID（id="pic"）。你不能这样做，ids必须是唯一的。

如果您更改了ID（例如：pic，pic2，pic3），并将其作为参数传递给缩放功能，则所有选项卡都会缩放。

因此，请将缩放功能更改为：

function zoom(zm, id) {
  var img=document.getElementById(id);
  ...
}

让你的html看起来像这样（只有一个例子）：

<div id="tabs-2">
  <input type="button" value ="-" onClick="zoom(0.9, 'pic2')"/>
  <input type="button" value ="+" onClick="zoom(1.1, 'pic2')"/>

  <div id="thediv">
   <img id="pic2" src="http://stereo-ssc.nascom.nasa.gov/beacon/t0193.jpg"/>
  </div>
</div>

现在所有三个都会单独缩放。这是显示它的jsbin。

但是，有一个错误。用于跟踪缩放状态的变量将在选项卡之间共享。这意味着“缩放限制”并未真正实施：您只需将一个标签一直向下缩放，然后将下一个标签一直向上缩放。重复此操作可使任何图像变大或变小。我不认为这是你想要的，但我会给你一个练习让你解决。

Javascript放大不同的标签

2 个答案: