效果圖：
淘寶圖片選中效果.gif
源代碼：
.html文件的代碼
<!DOCTYPE html>
<head>
<meta charset="utf-8"/>
<title>放大鏡</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="div1">
<!--圖片顯示的div small_pic-->
<div class="small_pic">
<!--用于onmouseover事件-->
<span class="mark"></span>
<!--鼠標放上去顯示的小的span-->
<span class="float_layer"></span>
</div>
<div class="big_pic">
</div>
</div>
<script type="text/javascript">
var oDiv=document.getElementById('div1');
// 用于onmouseover 事件的 span
var oMark=document.querySelector('#div1 .mark');
// 獲取放在圖片上顯示的小span
var oFloat=document.querySelector('#div1 .float_layer');
// 獲取顯示大圖片的div
var oBig=document.querySelector('#div1 .big_pic');
var oSmall=document.querySelector('#div1 .small_pic');
// 獲取顯示的大圖片
var oImg=oBig.getElementsByTagName('img')[0];
oMark.onmouseover=function () // 鼠標放在圖片上時，所有的display:none均變為display:block
{
oFloat.style.display='block';
oBig.style.display='block';
};
oMark.onmouseout=function ()
{
oFloat.style.display='none';
oBig.style.display='none';
};
oMark.onmousemove=function (ev)
{
var oEvent=ev||window.event; // 獲取事件對象，瀏覽器的兼容寫法
// 鼠標到視窗左距離 - div1到視窗左的距離- 圖片大小的div到div1左的距離 - 浮動的span的寬度的一半；
var l =oEvent.clientX-oDiv.offsetLeft-oSmall.offsetLeft-oFloat.offsetWidth/2;
// 鼠標到視窗上距離 - div1到視窗上的距離- 圖片大小的div到div1上的距離 - 浮動的span的高度的一半；
var t =oEvent.clientY-oDiv.offsetTop-oSmall.offsetTop-oFloat.offsetHeight/2;
if(l<0)
{
l=0;
}
else if(l>oMark.offsetWidth-oFloat.offsetWidth)//span的寬-浮動的span的寬度
{
l=oMark.offsetWidth-oFloat.offsetWidth;
}
if(t<0)
{
t=0;
}
else if(t>oMark.offsetHeight-oFloat.offsetHeight)
{
t=oMark.offsetHeight-oFloat.offsetHeight;
}
// 通過以上的計算，隨著鼠標的移動設置浮動span的位置
oFloat.style.left=l+'px';
oFloat.style.top=t+'px';
// percentX 為浮動span左側距離圖片大小的div的距離在剩余的寬度中的百分比
var percentX=l/(oMark.offsetWidth-oFloat.offsetWidth);
var percentY=t/(oMark.offsetHeight-oFloat.offsetHeight);
// 根據上面計算的百分比計算被放大的圖片的left，top
oImg.style.left=-percentX*(oImg.offsetWidth-oBig.offsetWidth)+'px';
oImg.style.top=-percentY*(oImg.offsetHeight-oBig.offsetHeight)+'px';
};
</script>
</body>
</html>
.css文件的代碼
#div1 { width: 200px; height: 200px; padding: 5px; border: 1px solid #ccc; position: relative; }
#div1 .small_pic { width: 200px; height: 200px; background: #eee; position: relative; }
#div1 .float_layer { width: 50px; height: 50px; border: 1px solid #000; background: #fff; filter: alpha(opacity: 30); opacity: 0.3; position: absolute; top: 0; left: 0; display:none; }
#div1 .mark {width:100%; height:100%; position:absolute; z-index:2; left:0px; top:0px; background:red; filter:alpha(opacity:0); opacity:0;}
#div1 .big_pic { position: absolute; top: -1px; left: 215px; width:250px; height:250px; overflow:hidden; border:2px solid #CCC; display:none; }
#div1 .big_pic img { position:absolute; top: -30px; left: -80px; }
