鼠标悬停图片放大提示效果

HTML

<!--实现简单的相册效果-->
<div id="gallery">
<ul>
    <!--相册所需要的图片集-->
    <li><a href="images/sample1.jpg" class="tooltip" title="喜鹊看花"><img src="images/sample1.jpg"/></a></li>
    <li><a href="images/sample2.jpg" class="tooltip" title="繁花朵朵"><img src="images/sample2.jpg"/></a></li>
    <li><a href="images/sample3.jpg" class="tooltip" title="姹紫嫣红"><img src="images/sample3.jpg"/></a></li>
    <li><a href="images/sample5.jpg" class="tooltip" title="含苞怒放"><img src="images/sample5.jpg"/></a></li>
</ul>		
</div>
                        

JS

$(function(){
    var x = 10;
    var y = 20;
    $("a.tooltip").mouseover(function(e){
        this.myTitle = this.title;       //得到当前链接的titl，即标题
        this.title = "";
        var imgTitle = this.myTitle? "<br/>" + this.myTitle : "";
        var tooltip = "<div id='tooltip'> "+
                      "<img src='"+ this.href +"' alt='放大提示'/>"+
                      imgTitle+"</div>"; //新建一个id为tooltip的div元素
        $("body").append(tooltip);	     //元素内部包含一个img，用来显示图片并且显示标题，追加到body区
        $("#tooltip")                   //更改tooptip的顶部和左侧位置
            .css({
                "top": (e.pageY+y) + "px",
                "left":  (e.pageX+x)  + "px"
            }).show("fast");	       //使用show函数快速显示
    }).mouseout(function(){
        this.title = this.myTitle;
        $("#tooltip").remove();	        //当鼠标移出时，从body区删除该div元素
    }).mousemove(function(e){         //当鼠标移动时，调整div的位置位于鼠标箭头的下方
        $("#tooltip")
            .css({
                "top": (e.pageY+y) + "px",
                "left":  (e.pageX+x)  + "px"
            });
    });
})