放大div內部，改變內部元素，但不是div本身

我正在尋找一種放大div元素的方法。由於this question沒有提供一些代碼示例，因此我決定發佈以下內容。放大div內部，改變內部元素，但不是div本身

This jsfiddle已經有所幫助，但正如您在my adapted jsfiddle中看到的那樣，整個div都會縮放。我只是想要裏面的圖像進行縮放。如果放大，div應該有溢出（也滾動條）。這是可能的，而不包括其他腳本例如panzoom？

HTML

<div id="pane"> 
    <img src="http://i.stack.imgur.com/oURrw.png"> 
</div>

的JavaScript

$('#pane').bind('mousewheel DOMMouseScroll', function(e){ 
    var stage = $(this); 
    scaleData = getZoom(stage); 
    if (e.originalEvent.detail < 0){ 
    setZoom(scaleData.curScale * '.9', stage); 
    } 
    else{ 
    setZoom(scaleData.curScale * '1.1', stage); 
    } 
}); 



function setZoom(scale, el){ 
    scale = Math.round(scale*10)/10; 
    el.attr({ 
    style: 
    'zoom: '+scale+';'+ 
    '-webkit-transform: scale('+scale+');'+ 
    '-moz-transform: scale('+scale+');'+ 
    '-o-transform: scale('+scale+');'+ 
    '-ms-transform: scale('+scale+');'+ 
    'transform: scale('+scale+');' 
    }); 
} 

function getZoom(el){ 
    var curZoom = el.css('zoom'); 
    var curScale = el.css('transform') || 
     el.css('-webkit-transform') || 
     el.css('-moz-transform') || 
     el.css('-o-transform') || 
     el.css('-ms-transform'); 
    if (curScale === 'none'){ 
    curScale = 1; 
    }else{ 
    //Parse retarded matrix string into array of values 
    var scaleArray = $.parseJSON(curScale.replace(/^\w+\(/,"[").replace(/\)$/,"]")); 

    //We only need one of the two scaling components as we are always scaling evenly across both axes 
    curScale = scaleArray[0]; 
    } 
    return { curZoom: curZoom, curScale: curScale }; 
}

CSS

div#pane{ 
    height: 20em; 
    margin: auto; 
    background-color: #ffffff; 
    overflow: scroll; 
    position: relative; 
    z-index: 0; 
}

謝謝

來源

2016-02-01 MineSweeper

如果我理解正確的解決辦法是改變你的JS中的jsfiddle提供給2號線：

var stage = $(this).find('img');

我只是包括.find('img')到你有什麼就有結束。以前你縮放了整個div，現在它只放大img標籤。

來源

2016-02-01 21:53:54 Voreny

另外，'$（'＃pane img'）'第1行。 – Draco18s

好吧！這已經起作用了，我在發佈我的問題時沒有考慮到這一點。我試圖將更大的問題歸結爲這個問題。我的div＃窗格實際上是'jsplumb'元素的父級（也是div）。我應該編輯我的問題嗎？ – MineSweeper

我不認爲我明白你來自哪裏。你的意思是放大的div沒有滾動條出現？ – Voreny

放大div內部，改變內部元素，但不是div本身

回答

相關問題