图片放大镜程序

移动这里的小块到图片上看看

脚本说明:
第一步：把如下代码加入<body>区域中
<SCRIPT language=JavaScript>

</SCRIPT>

<SCRIPT language=JavaScript1.2>
<!--
function initLayers(n) {
	for (var i = 1; i <= n; i++) {
	if (n4) {
	div[i] = eval("document.div" + i);
	div[i].x = div[i].left;
	div[i].y = div[i].top;
	div[i].w = div[i].clip.width;
	div[i].h = div[i].clip.height;
	}
	if (ie4) {
	div[i] = eval("div" + i + ".style");
	div[i].x = div[i].pixelLeft;
	div[i].y = div[i].pixelTop;
	div[i].w = div[i].pixelWidth;
	div[i].h = div[i].pixelHeight;
	}
	if (ie5) {
	div[i] = eval("div" + i);
	div[i].x = div[i].offsetLeft;
	div[i].y = div[i].offsetTop;
	div[i].w = div[i].offsetWidth;
	div[i].h = div[i].offsetHeight;
	}}}

function showObject(object) {
	if (n4) object.visibility = "show";
	if (ie4) object.visibility = "visible";
	if (ie5) object.style.visibility = "visible";
	}

function hideObject(object) {
	if (n4) object.visibility = "hide";
	if (ie4) object.visibility = "hidden";
	if (ie5) object.style.visibility = "hidden";
	}

function showNestedLayer(id,parent) {
	if (n4) document.layers[parent].document.layers[id].visibility = "show"
	else if (ie) document.all[id].style.visibility = "visible"
	}

function hideNestedLayer(id,parent) {
	if (n4) document.layers[parent].document.layers[id].visibility = "hide"
	else if (ie) document.all[id].style.visibility = "hidden"
	}

function eventXcoord(e) {
	if (n4) { var x = e.pageX }
	if (ie) { var x = event.x + document.body.scrollLeft }
	return x;
	}

function eventYcoord(e) {
	if (n4) { var y = e.pageY }
	if (ie) { var y = event.y+document.body.scrollTop }
	return y;
	}

function canvasWidth() {
	if(n4) {
	x = innerWidth;
	}
	if (ie) {
	x =document.body.clientWidth;
	}
	return x;
	}

function canvasHeight() {
	if(n4) {
	x = innerHeight;
	}
	if (ie) {
	x =document.body.clientHeight;
	}
	return x;
	}
//-->
</SCRIPT>

<SCRIPT language=JavaScript1.2>
<!--
var dragActive = false
var proceed

xsetoff=100;
ysetoff=50;
diameter=180;
radius=90;

document.onmousedown = mouseDown
document.onmousemove = mouseMove 
document.onmouseup = mouseUp
if (n4) {document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP)}

function mouseDown(e) {
//	if ((n4 && e.which!=1) || (ie4 && event.button!=1)) return true
	dragActive = mouseOver(e);
	dragClickX = x - div[5].x;
	dragClickY = y - div[5].y;
	if (dragActive) {
	x = eventXcoord(e);
	y = eventYcoord(e);
	return false
	}
	else return true
	}

function mouseMove(e) {
	if (dragActive) {
	x = eventXcoord(e);
	y = eventYcoord(e);
	div[5].x = x - dragClickX;
	div[5].y = y - dragClickY;
	shiftTo(div[5],div[5].x,div[5].y)
	clipBy(div[2],radius+div[5].y*2-ysetoff,radius+diameter+div[5].x*2-xsetoff,radius+diameter+div[5].y*2-ysetoff,radius+div[5].x*2-xsetoff);
	shiftTo(div[2],(xsetoff-(radius+div[5].x)),(ysetoff-(radius+div[5].y)));
	shiftTo(div[6],div[5].x,div[5].y);
	return false
	}
	else return true
}

function mouseUp(e) {
	x = eventXcoord(e);
	y = eventYcoord(e);
	dragActive = false
	return true
}

function mouseOver(e) {
	var hit= false;
	x = eventXcoord(e);
	y = eventYcoord(e);
	if (x>=div[5].x && x<=div[5].x+div[5].w && y>=div[5].y && y<=div[5].y+div[5].h) {
	hit = true;
	}
	return hit;
	}
//-->
</SCRIPT>

<STYLE type=text/css>#div1 {
	LEFT: 50px; WIDTH: 377px; CLIP: rect(0px 377px 384px 0px); POSITION: absolute; TOP: 50px; HEIGHT: 384px
}
#div2 {
	Z-INDEX: 3; LEFT: 0px; WIDTH: 180px; CLIP: rect(0px 0px 0px 0px); POSITION: absolute; TOP: 0px; HEIGHT: 200px; BACKGROUND-COLOR: #ffffff; layer-background-color: #ffffff
}
#div3 {
	Z-INDEX: 4; LEFT: 500px; WIDTH: 30px; CLIP: rect(0px 180px 180px 0px); POSITION: absolute; TOP: 300px; HEIGHT: 30px
}
#div4 {
	Z-INDEX: 5; LEFT: 500px; WIDTH: 30px; CLIP: rect(0px 180px 180px 0px); POSITION: absolute; TOP: 25px; HEIGHT: 30px
}
#div5 {
	Z-INDEX: 6; LEFT: 500px; WIDTH: 180px; CLIP: rect(0px 180px 180px 0px); POSITION: absolute; TOP: 100px; HEIGHT: 180px
}
A {
	COLOR: #996633; TEXT-DECORATION: none
}
</STYLE>
<DIV id=div1>
<IMG src="jzhl.jpg" width=150></DIV>

第二步：把<body>中的内容改为：
<body  onload="if (n4 || ie){initLayers(7);hideObject(div[7]);}">