图片放大查看细节效果
参照《锋利的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>
