JS处理 图片指向放大功能

<style type="text/css">
	#tooltip {
		position: absolute;
		border: 0px solid #CCC;
		display: none;
		color: #FFF;
		padding: 2px;
	}
</style>  <!-- 浮动框格式加载 -->
<a class="tooltip" target="_blank" href="<?php echo $r['cardpicture'];?>">
	<image style="width:50px" src="<?php echo $r['cardpicture']; ?>">
</a>  <!-- 创建图片链接以及图片显示。 -->
<script type="text/javascript">
	//js加载
	$(function () {
		var x = 10;
		var y = 20;
		$("a.tooltip").mouseover(function (e) {   //当a标签class类名为tooltip的标签被指向时
			this.myTitle = this.title;
			this.title = "";
			var imgTitle = this.myTitle ? "<br>" + this.myTitle : "";
			var tooltip = "<div id='tooltip'><img src='" + this.href + "' alt='产品预览图'/>" + imgTitle + "<\/div>"; //创建 div 元素
			$("body").append(tooltip);        //把它追加到文档中
			$("#tooltip").css({
				"top": (e.pageY + y) + "px",
				                   "left":  (e.pageX + x)  + "px"
			}).fadeIn(600);          //设置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"
			});
		});
	})
</script>