jQuery efecto de desplazamiento de imagen

Question

Estoy tratando de lograr this effect con jQuery.

Escribí parte del código, pero tiene errores (vaya a la esquina inferior derecha y verá).
check it out

Básicamente, si hay un plugin de jQuery ya incorporado que sabes de que hace esto, yo estaría muy feliz con ella, si no, cualquier ayuda con mi fórmula sería apreciada. Esto es lo que recibo por no prestar atención en las clases de Matemáticas :)

Gracias de antemano.

Maikel

Answer 1

general, creo que esto es lo que está buscando:

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

cambios notables:

• new_x y new_y debe dividirse por las imágenes altura/anchura, no el contenedor de altura/anchura, que es más ancha.
• this ya es un objeto jQuery en una función $.fn.plugin, no es necesario envolverlo.
  • i y p eran también objetos jQuery, no hay necesidad de mantenerlos
• envolver sin necesidad de obligar mousemove en mouseenter (que vuelve a enlazar) la mousemove sólo se producirá cuando se está dentro de todos modos.

Answer 2

Nick Craver me ha respondido por unos 10 minutos, pero este es mi código para esto, usando background-image para colocar la imagen en lugar de una imagen real.

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

La cantidad enorme de variables están allí porque el controlador de eventos mousemove tiene que ser lo más eficiente posible. Es un poco más restrictivo, porque necesita conocer las dimensiones, pero creo que el código puede modificarse fácilmente para que funcione con img s, para lo cual se puede calcular fácilmente el tamaño.

Una demostración simple de esta: http://www.jsfiddle.net/yijiang/fq2te/1/