Javascript Zoom on different tabs

问题

I have made a simple zoom in and out function with button as well as mousewheel function. The main concept is to limit the maximum zoom level and minimum zoom level.

I have successfully made it in two ways

BIN 1 BIN 2

But i tried to make this in a tab section with unique ID or by class.

My script

 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);
 }
 };

Here i am getting my element by using GetElementById to access my image tag is there any way to get access all the img tags in other tabs too.

I also tried getElementsbyClassName but its not working it just retrieving the nodeslist.

How can i access all three images here

Current BIN

回答1:

you need to use different ID's

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

回答2:

You have assigned all three images the same id (id="pic"). You can't do that, ids must be unique.

If you change their ids, (ex: pic, pic2, pic3), and pass that in to your zoom function as an argument, then all the tabs will zoom.

So change the zoom function to look like this:

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

And make your html look like this (just one for an example):

<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>

Now all three will zoom individually. Here's a jsbin showing it.

But, there's a bug. The variable you use to track the zoom state is being shared between the tabs. This means the "zoom limit" is not really enforced: you can just zoom one tab all the way down, then the next tab all the way up. Repeat this to make any of the images as big or as small as you want. I don't think this is what you want, but I'm going to leave it an exercise for you to fix.

来源：https://stackoverflow.com/questions/14064942/javascript-zoom-on-different-tabs

标签

javascript

jquery

html

tabs

zooming