Efekt hover jQuery image

Question

Próbuję uzyskać this effect z jQuery.

Napisałem trochę kodu, ale jest on wadliwy (przejdź do dolnej prawej kolumny, a zobaczysz).
check it out

Zasadniczo Jeśli istnieje już wbudowane jQuery plugin, że wiesz o tym, że nie, byłbym bardzo szczęśliwy go używać, jeśli nie, każda pomoc z moim wzorem będą mile widziane. To właśnie dostaję za nie zwracanie uwagi na zajęcia matematyczne :)

Z góry dziękuję.

Maikel

Answer 1

Ogólnie myślę, że to jest to, czego szukasz:

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

You can test it here.

Ważniejsze zmiany:

• new_x i new_y powinna być podzielona przez obrazów wysokość/szerokość, wysokość/szerokość nie kontenera, który jest szerszy.
• this jest już obiektem jQuery w funkcji $.fn.plugin, nie trzeba go zawijać.
  • i i p były również obiekty jQuery, nie ma potrzeby, aby utrzymać owijanie ich
• nie ma potrzeby wiązania mousemove na mouseenter (co powoduje ponowne powiązanie) mousemove tylko wystąpić, gdy jesteś wewnątrz tak.

Answer 2

Nick Craver pokonać mnie do odpowiedzi przez około 10 minut, ale to jest mój kod do tego, używając background-image aby ustawić obraz zamiast rzeczywistego obrazu.

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'; 
}); 

ogromny ilość zmiennych są tam, ponieważ obsługi zdarzeń mousemove musi być jak najbardziej skuteczny. Jest nieco bardziej restrykcyjny, ponieważ musisz znać wymiary, ale myślę, że kod można łatwo zmienić, aby działał z img s, dla którego rozmiar można łatwo obliczyć.

Prosty demo to: http://www.jsfiddle.net/yijiang/fq2te/1/