您现在的位置：素材 > 网页特效 > 图片类 > 图片放大镜程序
搜索
范文分类
图片放大镜程序
[查看演示]
脚本说明:
第一步：把如下代码加入<body>区域中
<SCRIPT language=JavaScript>
<!--
n4 = (document.layers)? true:false;
ie = (document.all)? true:false;
ie4 = (ie && navigator.appVersion.indexOf('MSIE 4')>0)? true:false;
ie5 = (ie && navigator.appVersion.indexOf('MSIE 5')>0)? true:false;
//Add by Jerry
ie6 = (ie && navigator.appVersion.indexOf('MSIE 6')>0)? true:false;
ie5=(ie5 || ie6)
//Add End
div = new Array();
//-->
</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 shiftTo(object,x,y) {
object.x = x;
object.y = y;
if (ie5) {
object.style.pixelLeft = object.x;
object.style.pixelTop = object.y;
}
else {
object.pixelLeft = object.x;
object.pixelTop = object.y;
}}

function clipBy(object,t,r,b,l) {
if (n4) {
object.clip.top = t;
object.clip.right = r;
object.clip.bottom = b;
object.clip.left = l;
}
if (ie4) {
object.clip = "rect(" + t + "px "+ r + "px " + b + "px " + l + "px)";
}
if (ie5) {
object.style.clip = "rect(" + t + "px "+ r + "px " + b + "px " + l + "px)";
}
}

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>

<DIV id=div2>
<TABLE cellSpacing=0 cellPadding=0 width=1000 border=0>
<TBODY><TR><td></td></tr></table>
<table height=100><tr><td></td></tr></table>
<TABLE cellSpacing=0 cellPadding=0 width=1000 border=0>
<TBODY><TR><TD>
<IMG src="jzhl.jpg" width=350>
</TD></TR></TBODY></TABLE></DIV>


<DIV id=div3>
</DIV>

<DIV id=div4>
</DIV>

<DIV id=div5>
<TABLE cellSpacing=0 cellPadding=0 width=10 border=10>
<TBODY><TR><TD>
<TABLE cellSpacing=0 cellPadding=0 border=8>
<TBODY><TR></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></DIV>
<DIV id=div6>
</DIV>
<DIV id=div7>
</DIV>


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