小编Chr*_*ian的帖子

这看起来应该很简单,但由于某种原因,我不能完全围绕它.我在"viewport"div中有一个图像,其中overflow属性设置为hidden.

我已经使用jQuery UI实现了简单的缩放和平移,但是我无法使缩放看起来来自视口的中心.我在Photoshop上做了一个小小的截屏视频我想要重现的效果:http://dl.dropbox.com/u/107346/share/reference-point-zoom.mov

在PS中,您可以调整缩放参考点,对象将从该点开始缩放.显然这对HTML/CSS/JS来说是不可能的,所以我试图找到合适的左边和顶部CSS值来​​模仿效果.

这是有问题的代码,删除了一些不必要的位:

HTML

<div id="viewport">
    <img id="map" src="http://dl.dropbox.com/u/107346/share/fake-map.png" alt="" />
</div>

<div id="zoom-control"></div>

JavaScript的

$('#zoom-control').slider({
    min: 300,
    max: 1020,
    value: 300,
    step: 24,
    slide: function(event, ui) {
        var old_width = $('#map').width();
        var new_width = ui.value;
        var width_change = new_width - old_width;
        $('#map').css({
            width: new_width,

            // this is where I'm stuck...
            // dividing by 2 makes the map zoom
            // from the center, but if I've panned
            // the map to a different location I'd …