jQuery图像悬停效果

Question

我试图用jQuery 实现这个效果.

我写了一些代码,但它是有缺陷的(移动到右下角的corder,你会看到).
看看这个

基本上,如果有一个已经建立的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 });
            });
        }
    });
}

你可以在这里测试一下.

显着变化:

• new_x并且new_y应该由被划分的图像的高度/宽度,而不是在容器的高度/宽度,这是更宽.
• this已经是$.fn.plugin函数中的jQuery对象,无需包装它.
  • i并且p也是jQuery对象,不需要继续包装它们
• 无需绑定mousemove上mouseenter(它重新绑定)的mousemove,当你在里面无论如何才会发生.