开发者

jQuery plugin to do crazy New York Times-style hover zooming?

开发者 https://www.devze.com 2023-02-03 07:21 出处:网络
I\'m wondering if anybody knows of a code snippet anywhere that allows you to do zoomed pans on hover -- for an example, see:

I'm wondering if anybody knows of a code snippet anywhere that allows you to do zoomed pans on hover -- for an example, see:

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

开发者_Python百科There's an image of Abraham Lincoln reading the Emancipation Proclamation, built in Flash, that does exactly what I'm asking.

Note that I'm not asking for ultimately a "magnifying glass" tool like Anything Zoomer (http://css-tricks.com/examples/AnythingZoomer/); I want the zoomed component to replace the unzoomed image and maintain the same dimensions.

I'd prefer this as a jQuery plugin but am open to anything.


here's a starting point:

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


Just found this, slightly closer to what I'm wanting: MiniZoomPan -- see: http://plugins.jquery.com/project/miniZoomPan

Thanks anyway though, Andy!

0

精彩评论

暂无评论...
验证码 换一张
取 消