<!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=gb2312" />
<title>無標題文檔</title>
<script src="jquery.min.js"></script>
<script>
/*滑過圖片出現放大鏡效果*/
$(function(){
$(" .prolist ul li").each(function(index){
var position = $(this).position();
var li_left = position.left;
var li_top = position.top;
var img_width = $(this).find("img").width();
var img_height = $(this).find("img").height();
var spanHtml = '<span style="position: absolute; top: '+li_top+'px; left: '+li_left+'px; width:'+img_width+'px; height: '+img_height+'px; cursor: pointer;" class="imageMask"></span>';
$(spanHtml).hover(function(){
$(this).addClass("imageOver");
},function(){
$(this).removeClass("imageOver");
}).appendTo( $(this).find("a") );
})
})
</script>
<style>
/* imgHover */
span.imageMask{
background:white;
filter:alpha(opacity=0);
-moz-opacity:0;
-khtml-opacity: 0;
opacity: 0;
}
span.imageOver{
background: url(images/zoom.gif) no-repeat 50% 50%;
filter:alpha(opacity=60);
-moz-opacity:0.6;
-khtml-opacity: 0.6;
opacity: 0.6;
}
</style>
</head>
<body>
<div class="prolist">
<h3>新款上市</h3>
<div class="prolist_content">
<ul>
<li>
<a href="detail.html"><img src="images/img_1.jpg" alt="" /></a><span>免燙高支棉襯衣1</span><span> $120.00</span>
</li>
</ul>
</div>
</div>
</body>
</html>
效果圖：
