图片鼠标悬浮预览 jquery 实现

在网页上的图片 比较小。当我们用鼠标悬浮上去的时候 想要显示出 大图的预览效果。我找了一个使用 jquery 制作的效果。

jquery 代码如下

$(function(){
var x = 10;
var y = 20;
$("a.tooltip").mouseover(function(e){
this.myTitle = this.title;
this.title = "";
var imgTitle = this.myTitle? "<br/>" + this.myTitle : "";
var imgUrl = $(this).children().attr("src");
var tooltip = "<div id='tooltip'><img src='"+ imgUrl +"' alt='模板预览图'/>"+imgTitle+"<\/div>"; //创建 div 元素
$("body").append(tooltip);//把它追加到文档中
$("#tooltip")
.css({
"top": (e.pageY+y) + "px",
"left": (e.pageX+x) + "px"
}).show("fast"); //设置x坐标和y坐标，并且显示
}).mouseout(function(){
this.title = this.myTitle;
$("#tooltip").remove(); //移除
}).mousemove(function(e){
$("#tooltip")
.css({
"top": (e.pageY+y) + "px",
"left": (e.pageX+x) + "px"
});
});
})

对应的html 代码如下：

<a href="#" class="tooltip"><img src="/uploads/allimg/090929/8-0Z9291R5000-L.gif" width="172" height="162"/></a>

<style type="text/css">
#tooltip{
position:absolute;
border:1px solid #ccc;
background:#333;
padding:2px;
display:none;
color:#fff;
}
</style>

当A 标记 class 属性为 tooltip 里面的 img 标记将会被 jquery 注册。鼠标悬浮上去后就会显示出跟随预览效果。