jquery实现鼠标悬停显示大图

HTML

<div class="tooltip123">
    <img src="***" />
</div>

CSS

#zoomView{
	position:absolute;
}

JS

$(".tooltip123 img").mouseover(function (e) {       //鼠标移入
	//var myTitle = this.title;
	var myTitle = this.title;
	var imgTitle = myTitle ? "<br/>" + myTitle : "";	//获取图片的title
	var zoomView = $('<div id="zoomView"><img src="' + this.src + '" alt="放大提示"/>' + imgTitle + "</div>"); //建立图片查看框
	$("body").append(zoomView);
	$("#zoomView").css({ "top": (e.pageY + 20) + "px", "left": (e.pageX + 10) + "px" });  //注意得在CSS文件中将其设置为绝对定位
}).mousemove(function (e) {
	$("#zoomView").css({ "top": (e.pageY + 20) + "px", "left": (e.pageX + 10) + "px" });	//鼠标移动时及时更新图片查看框的坐标
}).mouseout(function () {
	$("#zoomView").remove();	//鼠标移出时删除之前建立的图片查看框
});