эффект наведения изображения jQuery

Question

Я пытаюсь добиться этого эффекта с помощью jQuery.

Я написал часть кода, но он глючит (переместитесь в нижний правый угол, и вы увидите).
проверить

В принципе, если есть уже созданный плагин jQuery, о котором вы знаете, что он делает это, я был бы очень рад использовать его, если нет, то любая помощь с моей формулой будет признательна. Вот что я получаю за то, что не обращаю внимания на уроки математики:)

Заранее спасибо.

Maikel

Answer 1

В целом, я думаю, это то, что вы ищете:

$.fn.sexyImageHover = function() { 
    var p = this, // parent
        i = this.children('img'); // image

    i.load(function(){
        // get image and parent width/height info
        var pw = p.width(),
            ph = p.height(),
            w = i.width(),
            h = i.height();

        // check if the image is actually larger than the parent
        if (w > pw || h > ph) {
            var w_offset = w - pw,
                h_offset = h - ph;

            // center the image in the view by default
            i.css({ 'margin-top':(h_offset / 2) * -1, 'margin-left':(w_offset / 2) * -1 });

            p.mousemove(function(e){
                var new_x = 0 - w_offset * e.offsetX / w,
                    new_y = 0 - h_offset * e.offsetY / h;

                i.css({ 'margin-top':new_y, 'margin-left':new_x });
            });
        }
    });
}

Вы можете проверить это здесь .

Заметные изменения:

• new_x и new_y должны быть разделены на изображения высота / ширина, а не высота / ширина контейнера, которая шире.
• this уже является объектом jQuery в функции $.fn.plugin, его не нужно оборачивать.
  • i и p также были объектами jQuery, не нужно их оборачивать
• нет необходимости связывать mousemove с mouseenter (что связывает), mousemove произойдет, только когда вы все равно внутри.

Answer 2

Ник Крейвер опередил меня до ответа примерно на 10 минут, но это мой код для этого, используя background-image для позиционирования изображения вместо реального изображения.

var img = $('#outer'),
    imgWidth = 1600,
    imgHeight = 1200,
    eleWidth = img.width(),
    eleHeight = img.height(),
    offsetX = img.offset().left,
    offsetY = img.offset().top,
    moveRatioX = imgWidth / eleWidth - 1,
    moveRatioY = imgHeight / eleHeight - 1;


img.mousemove(function(e){
    var x = imgWidth - ((e.pageX - offsetX) * moveRatioX),
        y = imgHeight - ((e.pageY - offsetY) * moveRatioY);
    this.style.backgroundPosition =  x + 'px ' + y + 'px';
});

Существует огромное количество переменных , потому что обработчик событий mousemove должен быть максимально эффективным.Это немного более ограничительно, потому что вам нужно знать размеры, но я думаю, что код можно легко изменить, чтобы он работал с img s, для которых размер можно легко вычислить.

Простая демонстрация этого: http://www.jsfiddle.net/yijiang/fq2te/1/