jQuery 图像悬停效果

我正在努力实现这个效果 http://stuff.maikeldaloo.com/jq_img_hover/mousescroll.swf使用 jQuery。

我写了一些代码，但它有错误（移到右下角你就会看到）。
一探究竟 http://stuff.maikeldaloo.com/jq_img_hover/

基本上，如果您知道有一个已经构建的 jQuery 插件可以做到这一点，我会很高兴使用它，如果没有，任何对我的公式的帮助将不胜感激。这就是我在数学课上不专心所得到的结果:)

提前致谢。

Maikel

总的来说，我认为这就是您正在寻找的：

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

你可以在这里测试一下 http://jsfiddle.net/nick_craver/BeCF9/1/.

显着变化：

• new_x and new_y应除以images高度/宽度，而不是容器的高度/宽度，后者更宽。
• this is already a jQuery object in a $.fn.plugin function, no need to wrap it.
  • i and p也是 jQuery 对象，不需要继续包装它们
• 无需绑定mousemove on mouseenter（重新绑定）mousemove无论如何，只有当你在里面时才会发生。