Javascript在不同的標籤上放大

我使用按鈕和鼠標滾輪功能做了簡單的放大和縮小功能。主要概念是限制最大縮放級別和最小縮放級別。Javascript在不同的標籤上放大

我已經成功地使它在兩個方面

但我想使這個與唯一的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但它不工作，它只是檢索nodeslist。

我怎麼能在這裏

當前BIN

來源

2012-12-28 Vivek Dragon

您已將此標記爲jQuery問題。爲什麼？代碼似乎並沒有使用任何jQuery方法 –

@PaulPhillips我已經添加了jQuery UI的這個，所以我在這裏提到jquery –

訪問所有三個圖像，你需要使用不同的ID

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

來源

2012-12-28 05:25:34 Ivo

它不工作的朋友..... –

分配了所有三個圖像相同的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-28 05:54:08

雅謝謝，但mousewheel完全在這裏.. –

這應該是顯而易見的爲什麼鼠標滾輪不起作用。你需要傳入ID才能放大;這意味着搞清楚哪個標籤現在被選中/可見。 –

我試過它的值不通過，因爲窗口上的加載函數 –

Javascript在不同的標籤上放大

回答

相關問題