图片放大查看细节效果

参照《锋利的jQuery》第三章最后实例改写。

利用div的背景来定位显示的图片位置。背景图片的定位=鼠标移动所在位置-鼠标响应的A标签所在页面的位置。

效果图:

<!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" />
	<meta name="Keywords" content="Tomi-Eric" />
	<meta name="Description" content="Tomi-Eric,练习实例" />
	<title>图片放大</title>
	<style type="text/css">
	  #p-box{margin:100px auto}
	  ul{list-style:none;margin:0;padding:0;overflow:hidden}
	  li{float:left}
	  li a{text-decoration:none; display:block; float:left; margin:0 20px 0 0; color:#555}
	  li a img{ padding:2px;border:1px solid #dedede}
                 #zoom{ position:absolute; width:400px;height:300px;border:1px solid #333; background:#fff no-repeat}
	</style>
	<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
	<script type="text/javascript">
	$(function(){
	     var x=10;
	     var y=20;
		
	     $("a.zoom").mouseover(function(e){
		 var top=$(this).offset().top;
		 var left=$(this).offset().left;
                           var tooltip="<div id='zoom'></div>";
		 $("body").append(tooltip);
		  $("#zoom")
		         .css({
			    "top":(e.pageY+y)+"px",
			    "left":(e.pageX+x)+"px",
			    "background-image":"url("+this.href+")",
			    "background-position":"-"+(e.pageX-left)+"px  -"+(e.pageY-top)+"px"
			 }).show("fast");
		 }).mouseout(function(){
			    $("#zoom").remove();
		}).mousemove(function(e){
		            var top=$(this).offset().top;
		            var left=$(this).offset().left;
		            $("#zoom")
			       .css({
				  "top":(e.pageY+y)+"px",
				  "left":(e.pageX+x)+"px",
				  "background-position":"-"+(e.pageX-left)+"px  -"+(e.pageY-top)+"px"
			       });
		});

	});
	</script>
</head>
<body>
<div id="p-box">
<ul>
     <li><a href="images/apple_1_bigger.jpg" class="zoom" title="苹果iPod"><img src="images/apple_1.jpg" alt="苹果iPod" /></a></li>
	  <li><a href="images/apple_2_bigger.jpg" class="zoom" title="苹果 nano"><img src="images/apple_2.jpg" alt="苹果nano" /></a></li>
	   <li><a href="images/apple_3_bigger.jpg" class="zoom" title="苹果iPhone"><img src="images/apple_3.jpg" alt="苹果iPhone" /></a></li>
	    <li><a href="images/apple_4_bigger.jpg" class="zoom" title="苹果Mac"><img src="images/apple_4.jpg" alt="苹果Mac" /></a></li>
</ul>
</div>
</body>
</html>
posted @ 2011-09-17 14:19  Tomi-Eric's  阅读(517)  评论(0)    收藏  举报