jQuery 插件可以实现纽约时报风格的疯狂悬停缩放？

Question

我想知道是否有人知道任何地方的代码片段，允许您在悬停时进行缩放平移 - 例如，请参阅:

http://opinionator.blogs.nytimes.com/2010/12/09/visualizing-slavery/

有一张亚伯拉罕·林肯正在阅读《解放奴隶声明》的图像，它是用 Flash 构建的，它正是我所要求的。

请注意，我不最终要求像 Anything Zoomer (http://css-tricks.com/examples/AnythingZoomer/) 这样的“放大镜”工具；我希望缩放的组件替换未缩放的图像并保持相同的尺寸。

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

Answer 1

这是一个起点:

     $.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)
    }

demo