jqury实现点击小图出现大图

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.big_img{
	/*设置大图绝对定位*/
	position:absolute;
	left:200px;
	top:300px
	}
</style>
</style>
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<title>无标题文档</title>
<script type="text/javascript">
	$(function(){
		//获得原来图片的长和宽
		var width = $("#img1").attr("width");
		var height = $("#img1").attr("height");
		//将图片的长宽设为原来的1/4
		$("#img1").css("width",width/4+"px");
		$("#img1").css("height",height/4+"px");
		//鼠标划过小图时,大图出现
	$("#img1").mouseover(function(e){
			//将大图放入body中
		$("<img class=\"big_img\" src=\"123.jpg\" />").appendTo("body");
			//设置大图出现的位置距鼠标点击处的长宽为20px
			$(".big_img").css("top",e.pageY+20).css("left",e.pageX+20);
			//设置鼠标移开时,大图消失
			}).mouseout(function(){
					$(".big_img").remove();
				//设置图片随鼠标一起移动
				}).mousemove(function(e){
					$(".big_img").css("top",e.pageY+20).css("left",e.pageX+20);
					});
			   });
</script>
</head>

<body>
<img id="img1" src="123.jpg" width="581" height="454" />
</body>
</html>

你可能感兴趣的:(jqury实现点击小图出现大图)