0

我用按钮和鼠标滚轮功能做了一个简单的放大和缩小功能。主要概念是限制最大缩放级别和最小缩放级别。

我通过两种方式成功地做到了

箱 1 箱 2

但我试图在具有唯一 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

4

2 回答 2

0

您已为所有三个图像分配了相同的 id ( id="pic")。你不能这样做，ID 必须是唯一的。

如果您更改它们的 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。

但是，有一个错误。您用于跟踪缩放状态的变量正在选项卡之间共享。这意味着“缩放限制”并没有真正强制执行：您可以将一个选项卡一直向下缩放，然后将下一个选项卡一直向上缩放。重复此操作以使任何图像尽可能大或小。我不认为这是你想要的，但我将把它留给你来解决。

于 2012-12-28T05:54:08.860 回答
0

你需要使用不同的ID

var img=document.getElementById("pic1");
var img=document.getElementById("pic2");`
于 2012-12-28T05:25:34.987 回答