效果图：
淘宝图片选中效果.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; }
