JQuery плагин, чтобы сделать сумасшедшее масштабирование в стиле New York Times? - PullRequest
Новая
       29

JQuery плагин, чтобы сделать сумасшедшее масштабирование в стиле New York Times?

1 голос
/ 11 января 2011

Мне интересно, знает ли кто-нибудь фрагмент кода где-нибудь, что позволяет вам делать масштабированные панорамы при наведении - например, см .:

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

Есть изображение Авраама Линкольна, читающего Прокламацию об освобождении, встроенную во Flash, которая делает именно то, что я спрашиваю.

Обратите внимание, что я не запрашиваю в конечном итоге инструмент "увеличительное стекло", такой как Anything Zoomer (http://css -tricks.com / examples / AnythingZoomer /); Я хочу, чтобы увеличенный компонент заменял увеличенное изображение и сохранял те же размеры.

Я бы предпочел это как плагин jQuery, но я открыт для всего.

Ответы [ 2 ]

4 голосов
/ 11 января 2011

вот отправная точка: 

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

демо

0 голосов
/ 11 января 2011

Только что нашел это, немного ближе к тому, что я хочу: MiniZoomPan - см .: http://plugins.jquery.com/project/miniZoomPan

Спасибо, Энди!

...