<!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">
<html>
<head>
<title>wujinjian</title>
<base href="http://i3.6.cn/cvbnm/34/d2/48/">
<script type="text/javascript">
/*
*特别注意:
*放大的倍数=原图的大小/小图片显示的大小
*自己查看原图片的大小，我这是 400*400 px
*/
//图片对象
var imgObj;
//放大镜div对象
var zoomDivObj;
//显示小图片的div
var mainDivObj;
//放大后显示图片的div
var showDivObj;
//放大镜的大小
var zoomSize=50;
//放大镜的倍数(不能随便填)
var zoomMultiple=2;
//图片的路径
var imgPath="7d0fe1b65e1389c46045cd2d0e43a041.gif";
//小图片显示的大小
var imgW=200;
var imgH=200;
//显示的位置
var left=100;
var top=10;
//放大镜div的透明度(0~100)
var opacity=50;
//放大镜div的颜色
var rgb="223,223,223";
function load()
{
if(zoomDivObj==null)
createZoomDivObj();
if(mainDivObj==null)
createMainDivObj();
if(showDivObj==null)
createShowDivObj();
if(imgObj==null)
createImgObj();
zoomDivObj.style.width=zoomSize+"px";
zoomDivObj.style.height=zoomSize+"px";
showDivObj.style.width=zoomSize*zoomMultiple+"px";
showDivObj.style.height=zoomSize*zoomMultiple+"px";
showDivObj.style.backgroundImage="url("+imgPath+")";
imgObj.src=imgPath;
imgObj.style.width=imgW+"px";
imgObj.style.height=imgH+"px";
mainDivObj.style.width=imgW+"px";
mainDivObj.style.height=imgH+"px";
mainDivObj.style.left=left+"px";
mainDivObj.style.top=top+"px";
showDivObj.style.left=left+imgW+50+"px";
showDivObj.style.top=top+"px";
zoomDivObj.style.backgroundColor="rgb("+rgb+")";
//两个都要写，为了IE 和 火狐 的通用
zoomDivObj.style.filter="alpha(opacity="+opacity+")";
zoomDivObj.style.opacity=opacity/100;
}
function showZoomDiv()
{
if(zoomDivObj==null)
createZoomDivObj();
zoomDivObj.style.visibility="visible";
}
function moveZoomDiv(e)
{
if(zoomDivObj==null)
createZoomDivObj();
var w=zoomDivObj.style.width.replace("px","")-0;
var h=zoomDivObj.style.height.replace("px","")-0;
if(mainDivObj==null)
createMainDivObj();
var mouseX=e.clientX-(mainDivObj.style.left.replace("px","")-0);
var mouseY=e.clientY-(mainDivObj.style.top.replace("px","")-0);
window.status=mouseX+" "+mouseY;
zoomDivObj.style.left=mouseX-(w/2)+"px";
zoomDivObj.style.top=mouseY-(h/2)+"px";
if(showDivObj==null) createShowDivObj(); showDivObj.style.backgroundPosition=(-mouseX+w/2)*zoomMultiple+"px "+(-mouseY+h/2)*zoomMultiple+"px";
}
function hiddenZoomDiv()
{
if(zoomDivObj==null)
createZoomDivObj();
//zoomDivObj.style.visibility="hidden";
}
function createZoomDivObj()
{
zoomDivObj=document.getElementById("zoom_div_id");
}
function createMainDivObj()
{
mainDivObj=document.getElementById("main_div_id");
}
function createShowDivObj()
{
showDivObj=document.getElementById("show_div_id");
}
function createImgObj()
{
imgObj=document.getElementById("img_id");
}
</script>
</head>
<body onmousemove="moveZoomDiv(event)" onload="load()">
<div id="main_div_id" style="position:absolute;overflow:hidden;background-color:cyan;border:gray solid 1px;" onmouseover="showZoomDiv()" onmouseout="hiddenZoomDiv()" >
<img id="img_id">
<div id="zoom_div_id" style="position:absolute;left:0px;top:0px;overflow:hidden;visibility:hidden;"></div>
</div>
<div id="show_div_id" style="position:absolute;overflow:hidden;background-color:cyan;background-repeat:no-repeat;border:gray solid 1px;" ></div>
</body>
</html>