这个方程就像 ,,,
边距 = -half_overflow + (((center_offset - click_offset) * resize_ratio) - (center_offset - click_offset));
...而且你必须为 x 和 y 做这件事。
下面我将粘贴一些代码,但请记住,此代码处理方形图像,因此我将宽度用于宽度和高度。为了让您在矩形图像上使用它,您还需要获取高度并在我有宽度的所有 Y 计算中使用它,以及设置我正在使用的所有变量,如 content_width 等。但是算法都在那里并且您可以从代码中解决...
zoomChart: function(e)
{
var chart_max = 2048;
var zoom_max = egapp.user.options.zoom_multiplier || 2; // >= 2
var chart_bounds = $('#egapp_chart_bounds');
var chart_imgs = chart_bounds.find('img');
var width = chart_imgs.width();
if (width == chart_bounds.width()) { // zoom in
// margin = -half_overflow + (((center_offset - click_offset) * resize_ratio) - (center_offset - click_offset));
chart_bounds.removeClass('egapp_zoom_in');
if (width == chart_max)
return;
chart_bounds.addClass('egapp_zoom_out');
var new_width = parseInt(width * zoom_max);
if (new_width > chart_max)
new_width = chart_max;
var ratio = new_width / width;
var moveX = moveY = -((new_width - width) / 2);
var chart_offset = chart_bounds.offset();
var offsetX = (chart_offset.left + (width / 2)) - e.pageX;
var offsetY = (chart_offset.top + (width / 2)) - e.pageY;
moveX += parseInt((offsetX * ratio) - offsetX);
moveY += parseInt((offsetY * ratio) - offsetY);
chart_imgs.animate({width: new_width+'px', height: new_width+'px', marginLeft: moveX+'px', marginTop: moveY+'px'}, 'fast');
chart_bounds.addClass('egapp_zoom_out');
}
else { // zoom out
var new_width = egapp.content_width - 10;
chart_imgs.animate({width: new_width+'px', height: new_width+'px', marginLeft: 0, marginTop: 0}, 'fast');
chart_bounds.removeClass('egapp_zoom_out').addClass('egapp_zoom_in');
}
},
HTML类似于...
<div id="egapp_chart_bounds" style="width: 608px; height: 608px;" class="egapp_zoom_in">
<img id="egapp_timeline_chart" src="some.image" class="egapp_chart" style="width: 608px; height: 608px; margin-left: 0px; margin-top: 0px;">
<img id="egapp_expression_chart_9" src="overlay.image" class="egapp_chart_overlay" style="width: 608px; height: 608px;">
</div>
CSS就像......
#egapp_chart_bounds{
overflow: hidden;
}
.egapp_chart, .egapp_chart_overlay{
position: absolute;
}
.egapp_zoom_in{
cursor: -moz-zoom-in;
cursor: -webkit-zoom-in;
cursor: zoom-in;
}
.egapp_zoom_out{
cursor: -moz-zoom-out;
cursor: -webkit-zoom-out;
cursor: zoom-out;
}