jQuery插件做疯狂的纽约时报风格的悬停缩放？

我想知道是否有人知道允许您在悬停时进行缩放平移的代码片段——例如，请参见：

有一张亚伯拉罕·林肯阅读《解放宣言》的图片，内置于Flash中，这正是我所要求的

请注意，我并不是要求最终像任何变焦器一样的“放大镜”工具(http://css-tricks.com/examples/AnythingZoomer/); 我希望缩放的组件替换未缩放的图像并保持相同的尺寸

---

我更喜欢将其作为jQuery插件，但我对任何事情都持开放态度。

这里是一个起点：

     $.fn.zoom = function() {
        var w = this.width();
        var h = this.height();

        var zimg = $('<img>', {
            'src': this.attr('src')
        }).css({
            'position': 'absolute',
            'left': 0,
            'top': 0,
            'opacity': 0
        })

        var moveZone = $('<div>').css({
            'position': 'absolute',
            'left': 0,
            'top': 0,
            'width': '100%',
            'height': '100%'
        }).hover(

        function() {
            zimg.fadeTo(500, 1);
        }, function() {
            zimg.fadeTo(500, 0);
        }).mousemove(

        function(ev) {
            zimg.css({
                'left': (w - zimg.width()) / w * ev.offsetX,
                'top': (h - zimg.height()) / h * ev.offsetY
            });
        });

        this.wrap($('<div>').css({
            'overflow': 'hidden',
            'position': 'relative',
            'width': w,
            'height': h
        })).after(zimg, moveZone)
    }

$.fn.zoom=函数（）{
var w=this.width（）；
var h=这个.height（）；
var zimg=$（''）.css({
'位置'：'绝对'，
“左”：0，
“顶部”：0，
“宽度”：“100%”，
“高度”：“100%”
}).悬停(
函数（）{
zimg.fadeTo（500,1）；
}，函数（）{
zimg.fadeTo（500,0）；
})mousemove先生(
功能（ev）{
zimg.css({
“左”：（w-zimg.width（））/w*ev.offsetX，
“top”：（h-zimg.height（））/h*ev.offsetY
});
});
此.wrap（$（''）.css({
“溢出”：“隐藏”，
'位置'：'相对'，
“宽度”：w，
“高度”：h
})).之后（zimg，moveZone）
}

---

这里有一个起点：

     $.fn.zoom = function() {
        var w = this.width();
        var h = this.height();

        var zimg = $('<img>', {
            'src': this.attr('src')
        }).css({
            'position': 'absolute',
            'left': 0,
            'top': 0,
            'opacity': 0
        })

        var moveZone = $('<div>').css({
            'position': 'absolute',
            'left': 0,
            'top': 0,
            'width': '100%',
            'height': '100%'
        }).hover(

        function() {
            zimg.fadeTo(500, 1);
        }, function() {
            zimg.fadeTo(500, 0);
        }).mousemove(

        function(ev) {
            zimg.css({
                'left': (w - zimg.width()) / w * ev.offsetX,
                'top': (h - zimg.height()) / h * ev.offsetY
            });
        });

        this.wrap($('<div>').css({
            'overflow': 'hidden',
            'position': 'relative',
            'width': w,
            'height': h
        })).after(zimg, moveZone)
    }

$.fn.zoom=函数（）{
var w=this.width（）；
var h=这个.height（）；
var zimg=$（''）.css({
'位置'：'绝对'，
“左”：0，
“顶部”：0，
“宽度”：“100%”，
“高度”：“100%”
}).悬停(
函数（）{
zimg.fadeTo（500,1）；
}，函数（）{
zimg.fadeTo（500,0）；
})mousemove先生(
功能（ev）{
zimg.css({
“左”：（w-zimg.width（））/w*ev.offsetX，
“top”：（h-zimg.height（））/h*ev.offsetY
});
});
此.wrap（$（''）.css({
“溢出”：“隐藏”，
'位置'：'相对'，
“宽度”：w，
“高度”：h
})).之后（zimg，moveZone）
}

---

刚刚找到这个，稍微接近我想要的：迷你动物园——请看：

---

谢谢你，安迪

刚刚找到这个，稍微接近我想要的：迷你动物园——见：

---

谢谢你，安迪

感谢您更新代码，这项工作现在棒极了！肯定比现在的minizoompan更接近我想要的实现。感谢您更新代码，这项工作现在棒极了！肯定比现在的minizoompan更接近我想要的实现。