jQuery resmi hover efekti

Question

jQuery ile this effect elde etmeye çalışıyorum.

Bazı kodları yazdım, ancak buggy (sağ alt köşeye git ve göreceksiniz). Eğer, ben değilse, bunu kullanarak çok mutlu olurum bu olmadığını biliyorum zaten yerleşik jQuery eklentisi varsa
check it out

Temelde, benim formülü ile herhangi bir yardım mutluluk duyacağız. Bu, Maths sınıflarında dikkat etmediğim için aldığım şeydir :)

Şimdiden teşekkürler.

Answer 1

Maikel Genel olarak bu eğer aradığınız şey olduğunu düşünüyorum:

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

belirgin değişimler:

• new_x ve new_ygörüntüleri ile bölünmelidir yükseklik/genişlik, daha geniş değildir kapsayıcının yükseklik/genişlik.
• this zaten $.fn.plugin işlevinde bir jQuery nesnesidir, sarmaya gerek yoktur.
  • i ve p da jQuery nesneler, onları
• yine içeride olduğunuzda mousemove gerçekleşeceğini (rebinds olan) mouseenter üzerine mousemove bağlamak gerek sarma tutmak gerek vardı.

Answer 2

Nick Craver beni yaklaşık 10 dakika kadar bir yanıt vermeme karşın, gerçek bir görüntü yerine görüntüyü konumlandırmak için background-image kullanarak bu benim kodum.

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

değişkenlerin büyük miktar mousemove olay işleyicisi mümkün olduğunca verimli olmak zorunda çünkü vardır. Bu biraz daha kısıtlayıcıdır, çünkü boyutları bilmeniz gerekir, ancak kodun kolaylıkla hesaplanabildiği img s ile çalışmak için kolayca değiştirilebilir. Bunun

Basit bir demo: yavaşça durağına gelmesini Kenara http://www.jsfiddle.net/yijiang/fq2te/1/