0

ボタン付きの簡単なズームイン/ズームアウト機能とマウスホイール機能を作成しました。主な概念は、最大ズームレベルと最小ズームレベルを制限することです。

私は2つの方法で成功しました

BIN 1 BIN 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も試しましたが、ノードリストを取得するだけでは機能しません。

ここで3つの画像すべてにアクセスするにはどうすればよいですか

現在のBIN

4

2 に答える 2

0

別のIDを使用する必要があります

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

3 つのイメージすべてに同じ ID ( id="pic") を割り当てました。それはできません。ID は一意でなければなりません。

それらの ID (例: pic、pic2、pic3) を変更し、それをズーム関数に引数として渡すと、すべてのタブがズームされます。

ズーム機能を次のように変更します。

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

そして、HTML を次のようにします (例として 1 つだけ)。

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

これで、3 つすべてが個別にズームします。これはそれを示すjsbinです。

しかし、バグがあります。ズーム状態を追跡するために使用する変数は、タブ間で共有されています。これは、「ズーム制限」が実際には強制されていないことを意味します。1 つのタブを完全に縮小し、次のタブを完全に拡大することができます。これを繰り返して、画像を好きなだけ大きくしたり小さくしたりします。これはあなたが望むものではないと思いますが、修正するための演習として残しておきます。

于 2012-12-28T05:54:08.860 に答える