<style type="text/css">ul{  list-style:none;}li{  float:left;  margin-left:10px;}img{  border:#CCCCCC solid 1px;}#max{  position:absolute;  display:none; /*隐藏层*/}</style>

苹果产品列表：<ul><li><a href="images/apple_1_bigger.jpg"><img src="images/apple_1.jpg" /></a><li><a href="images/apple_2_bigger.jpg"><img src="images/apple_2.jpg" /></a><li><a href="images/apple_3_bigger.jpg"><img src="images/apple_3.jpg" /></a><li><a href="images/apple_4_bigger.jpg"><img src="images/apple_4.jpg" /></a></ul>

<script>$(document).ready(function(){  //e 事件对象，可以通过该事件对象获取事件的参数 e.pageX - X轴，距浏览器的左边的距离 e.pageY - y轴，距浏览器的顶端的距离   $("a").mouseover(function(e){  //鼠标移上去 向body追加大图元素    //大图的路径：当前连接的href属性值为大图的路径    var $imgSrc = $(this).attr("href");    var $maxImg ="<div id='max'><img src='"+$imgSrc+"'></div>";    //在body中添加元素    $("body").append($maxImg);    //设置层的top和left坐标，并动画显示层    $("#max").css("top", e.pageY+20).css("left",e.pageX+10).show('slow');   }).mouseout(function(){  //鼠标移开删除大图所在的层    $("#max").remove();  }).mousemove(function(e){  //鼠标移动时改变大图所在的层的坐标    $("#max").css("top", e.pageY+20).css("left",e.pageX+10);  });});</script>