Question

我正在寻找一种放大div元素的方法。由于this question没有提供一些代码示例，我决定发布以下内容。

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

谢谢

Answer 1

如果我理解正确，解决方案是将您在JSFiddle中提供的JS的第二行更改为：

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

我刚刚将.find('img')包含在你所拥有的内容中。以前你正在缩放整个div，现在它只缩放img标签。

缩放div内部，改变内部元素但不改变div本身

1 个答案: