jquery 图片提示放大效果

	<style>
		.tooltip img{
			width: 300px;height: 300px;
		}
		li{display: inline;}
	</style>

<ul>
	<li><a href="img/1.jpg" class="tooltip" title="蛋糕"><img src="img/1.jpg" alt="蛋糕"></a></li>
	<li><a href="img/2.jpg" class="tooltip" title="蛋糕2"><img src="img/2.jpg" alt="蛋糕2"></a></li>
	<li><a href="img/3.jpg" class="tooltip" title="蛋糕3"><img src="img/3.jpg" alt="蛋糕3"></a></li>

</ul>

<script type="text/javascript">
	$(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 $tooltip=$("<div id='tooltip'><img src='"+this.href+"' alt='产品预览图'>"+imgTitle+"</div>");
			//追加到文档
			$("body").append($tooltip);
			//设置x坐标和y坐标，并且显示
			$("#tooltip").css({"position":"absolute","top":(e.pageY+y)+"px",
	                                         "left":(e.pageX+x)+"px"}).show("fast");

		}).mouseout(function(){
			this.title=this.myTitle;
			$("#tooltip").remove();
		}).mousemove(function(e){
			$("#tooltip").css({"top":(e.pageY+y)+"px","left":(e.pageX+x)+"px"})
		})
	})
</script>

 

转载于:https://my.oschina.net/xiaojunx/blog/846599