jQuery实现图片点击放大

Google图片搜索结果有图片放大提示功能，也就是当鼠标悬停在一张小图上时，会弹出一个包含略大图片的框，方便给出信息，同时也使得搜索结果页显得简洁美观。用jQuery可以很方便地实现这项功能。基本的想法是当鼠标悬停或点击在一张小图上时，生成一个div并在里面添加放大的图片并添加一些其他任何html结构，div的位置就是鼠标当前位置附近。

首先给将要生成的div提供一些样式，假如div的id是“tooltip”，参考css样式：

#tooltip{
    position:absolute;
    border:1px solid #ccc;
    background:#333;
    padding:2px;
    display:none;
    color:#fff;
}
#tooltip a{
    color:#55CC33;
}
#tooltip a:visited {
    color:#55CC33;
}  

而在html文件中只需包含如下结构：

<a href='a.jpg' class='tooltip' title='a_middle.jpg'>
    <img src='a_small.jpg'/>
</a>

其中<img>的src是页面上显示的小图的url，而title给出的是放大提示用的中等大小的图的url，href则是原始大图。当然这些都可以根据需要来进行调整。另一种思路可以是不添加“title”属性，直接在js文件里通过href等属性的值通过字符串处理得到需要的图片的路径。

然后是js文件：

$(function(){
    var x = 200;
    var y = 200;   //定义放大后图片的显示位置与鼠标位置的关系
    $("a.tooltip").click(function(e){   //也可以根据需要改为mouseover事件
        $("#tooltip").remove(); 
        var pageWidth = document.body.scrollWidth;
        var pageHeight = document.body.scrollHeight;
        var tleft = e.pageX-x;
        var ttop = e.pageY-y; 
        tleft = tleft < 5 ? 5 : tleft;
        tleft = tleft > pageWidth-520 ? pageWidth-520 : tleft;
        ttop = ttop < 150 ? 150 : ttop;
        ttop = ttop > pageHeight-500 ? pageHeight-500 : ttop;
        var top = (ttop)+"px";
        var left = (tleft)+"px";//以上这几行代码是为了避免放大后的图片超出页面范围
        var imgTitle = this.title;
        var ni = new Image();  
        ni.src = imgTitle;;
        var tooltip = "<div id='tooltip' align='center'><img src= imgTitle '/><br />"+imgTitle+" "+"<a href='"+this.href+"'>查看原图</a></div>";    //可以是任意希望显示的html代码
        $("body").append(tooltip);
        ni.onload = function(){  //保证图片加载完毕，否则得到的图片大小可能为0
            var twidth = ni.width;   //得到放大后图片的大小，让div宽度与图片宽度相同
            var pwidth = twidth+"px";
            $("#tooltip")   //为添加的div增加位置、宽度属性
                .css({
                    "top": (top),
                    "left": (left),
                    "width": (pwidth)
                }).show("fast");
        }  
        $("#tooltip").mouseleave(function(){ //鼠标离开div区域后即清除它
            $(this).remove();
        });
        return false;
    });
})

其中添加第5行的代码是为了修复一个bug：如果鼠标悬停（点击）在一张图片后迅速离开了，那么div还没有来得及加载，自然也不会执行$("#tooltip").mouseleave的函数，那么下一次悬停（点击）时原来的div没有删除，就会导致参数的错乱。添加第5行代码就是为了在悬停（点击）时预先判断是否有id为tooltip的div残留，如果有则删除，没有的话由于jQuery选择器对找不到内容时并不会报错，因此这行代码就不会执行了。

这样想要的最终效果就实现了。效果如图：

注：本文根据《锋利的jQuery》书中的一部分改写而成。