鼠标移过图片放大显示效果

鼠标移过图片放大显示效果 - Original by Maomihz, Modified by Lan Tian

昨天晚上 Maomihz 让我帮他改一段 jQuery，实现鼠标移上去自动显示高清大图的效果。一开始有两个 Bug，一个是鼠标移到大图框上时，大图会闪来闪去，另一个就是图片会超出屏幕上边界。

我的修改，就是把大图放到小图底下去，然后给小图设定半透明效果。超出上边界的判断非常容易，写了个 max 函数就搞定了。

下面放 jQuery：

$(function(){
    var x = 22;
    var y = 540;
    var a = 0;

    $("a.smallimage").hover(function(e){
        if(a == 0){$("body").append('<div id="bigimage"><img src="'+ this.rel + '" alt="" /></div>');
        a = 1;}
        widthJudge(e);
        $("a.smallimage").fadeTo(300,0.3);
        $("#bigimage").fadeIn(300);
    },function(){
        $("#bigimage").fadeOut(300);
        $("a.smallimage").fadeTo(300,1);
    });

    $("a.smallimage").mousemove(function(e){
        widthJudge(e);
    });
    function max(a,b){if(a>b){return a;}else{return b;}}
    function widthJudge(e){
        var marginRight = document.body.clientWidth - e.pageX; 
        var imageWidth = $("#bigimage").width();
if(marginRight < imageWidth)
        {
            $("#bigimage").css({top:(max(e.pageY - y,22)) + 'px',left:(document.body.clientWidth - imageWidth + x ) + 'px'});
        }else{
            x = -22;
            $("#bigimage").css({top:(max(e.pageY - y,22)) + 'px',left:(e.pageX + x ) + 'px'});
        };
    }
});

对应的 CSS：

.smallimage{position:relative;z-index:3}
#bigimage { position:absolute;z-index:2;}
#bigimage img { height:500px; padding:5px; background:#fff; border:1px solid #e3e3e3;}

网页调用方法：

<div class="imgls">![small.jpg" rel="img0.jpg" class="smallimage"><img src="small](small.jpg" rel="img0.jpg" class="smallimage"><img src="small.jpg)</div>

截图：

下载：（用的是 Win8 那两朵花）

样例包