<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>放大鏡</title>
</head>
<body bgcolor="#FFFFFF">
<center>
--JS放大鏡顯示--
單擊"放大鏡"開始瀏覽，再次單擊停止。</center>
<!--縮略圖和放大鏡圖-->
<img src="http://www.softpure.com/soft/work/jsviewer/small_hill.gif" id="bgLayer" style="position:absolute; left:160px; top:50px;">
<img src="http://www.softpure.com/soft/work/jsviewer/viewer.gif" id="myviewer" οnclick="moveme=!moveme" οnmοusemοve="viewit(this)" style="background-repeat:no-repeat;background-position:2000px 2000px;position:absolute;">
<script language="JavaScript">
var viewer_bgcolor="#FFFFFF"; //放大鏡的背景色，建議設成和網頁背景色相同。
var bigmap="http://www.softpure.com/soft/work/jsviewer/big_hill.gif"; //大圖路徑
document.all.myviewer.style.backgroundImage='url('+bigmap+')';
document.all.myviewer.style.backgroundColor=viewer_bgcolor;
document.write('<img id="getsize" style="position:absolute; left:-2000px; top:-2000px;" src="'+bigmap+'">');
var moveme=false;
function viewit(obj){
if (moveme){
obj.style.left=event.x+parseInt(document.body.scrollLeft)-parseInt(obj.width)/2;
obj.style.top=event.y+parseInt(document.body.scrollTop)-parseInt(obj.height)/2;
Nx=parseInt(document.all.getsize.width)/parseInt(document.all.bgLayer.width);
bgx=(-1)*(Nx-1)*(event.x-parseInt(document.all.bgLayer.style.left)+parseInt(document.body.scrollLeft))-parseInt(obj.style.left)+parseInt(document.all.bgLayer.style.left);
Ny=parseInt(document.all.getsize.height)/parseInt(document.all.bgLayer.height);
bgy=(-1)*(Ny-1)*(event.y-parseInt(document.all.bgLayer.style.top)+parseInt(document.body.scrollTop))-parseInt(obj.style.top)+parseInt(document.all.bgLayer.style.top);
obj.style.backgroundPosition=bgx+" "+bgy;
}}
</script>
</body>
</html>
from:
http://www.jb51.net/article/395.htm
另：http://blog.csdn.net/sunxing007/archive/2009/05/11/4168547.aspx