jQuery图像悬停效果

Question

我试图用jQuery实现this effect。

我写了一些代码，但它是越野车（移到右下角，你会看到）。
check it out

基本上，如果有，你知道的，它这个，我会使用它，如果不是很高兴已经建成的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 }); 
      }); 
     } 
    }); 
} 

You can test it here。

值得注意的变化：

• new_x和new_y应由图像被划分高度/宽度，而不是在容器的高度/宽度，这是更宽。
• this已经是一个$.fn.plugin函数中的jQuery对象，不需要包装它。
  • i和p也jQuery的对象，没有必要继续它们包裹
• 没有必要对mouseenter结合mousemove（这将重新绑定）时，你在里面反正mousemove才会发生。

Answer 2

Nick Craver打了我约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一起工作，因为它的尺寸可以很容易地计算出来。

A的这个简单的演示：http://www.jsfiddle.net/yijiang/fq2te/1/

从慢慢来停止