<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>javascript实现图片放大镜效果</title>
</head>
<body>
<style>
body{ margin:5px; overflow:auto; border:none;}
#smallbox{ overflow:hidden; background:#000; float:left; position:relative;}
#bigbox{ overflow:hidden; background:#ccc;}
#view{ border:#cd0000 solid 1px;width:0px;height:0px;position:absolute;font-size:0px}
</style>
<script type="text/javascript">
function aa(sid,bid,sp,bp,bb,v,smallw,bpw,bph){
var sid=document.getElementById(sid);
var bid=document.getElementById(bid);
var vie=document.getElementById(v);
var sp=document.getElementById(sp);
var bp=document.getElementById(bp);
bigpicX=bp.width;
bigpicY=bp.height;
sh=smallw/(bigpicX/bigpicY);
vW=100;
vH=100;
bl=bigpicX/smallw;
var sw=smallw;
if(navigator.userAgent.search('MSIE')<=0)
{
sp.style.width=350+"px";
sp.style.height=350+"px";
sid.style.width=350+"px";
sid.style.height=350+"px";
bid.style.width=500+"px";
bid.style.height=350+"px";
vie.style.width=(vW)+"px";
vie.style.height=(vH)+"px";
vie.style.left=sid.offsetLeft+"px";
vie.style.top=sid.offsetTop+"px";
}
else{
sp.style.width=350;
sp.style.height=350;
sp.style.width=350;
sp.style.height=350;
bid.style.width=480;
bid.style.height=350;
vie.style.width=vW;
vie.style.height=vH;
vie.style.left=sid.offsetLeft;
vie.style.top=sid.offsetTop;
}
}
function move(e,ssw){
var sid=document.getElementById("smallbox");
var vie=document.getElementById("view");
var bid=document.getElementById("bigbox");
var dd=document.getElementById("big1");
var bp=document.getElementById("bigpic");
ssh=ssw;
if(navigator.userAgent.search('MSIE')<=0){
var vX=e.pageX-sid.offsetLeft;
var vY=e.pageY-sid.offsetTop;}
else{
vX=e.offsetX;
vY=e.offsetY;
}
vX=vX-vW/2;
vY=vY-vH/2;
if(vX<0){vX=0;}
if(vY<0){vY=0;}
if(navigator.userAgent.search('MSIE')<=0){
if(vX>ssw-vW){vX=ssw-vW;}
if(vY>ssh-vH){vY=ssh-vH;}
dd.style.marginLeft=(-vX*bl)+"px";
dd.style.marginTop=(-vY*bl)+"px";
vie.style.left=(vX + sid.offsetLeft)+"px";
vie.style.top=(vY + sid.offsetTop)+"px";
}
else{
if(vX>ssw-vW){vX=ssw-vW-1;}
if(vY>ssh-vH){vY=ssh-vH-1;}
dd.style.marginLeft=(-vX*bl);
dd.style.marginTop=(-vY*bl);
vie.style.left=(vX + sid.offsetLeft);
vie.style.top=(vY + sid.offsetTop);
}
}
</script>
<div id="smallbox">
<img src="PB412C.jpg" width="350" height="350" id="smallpic" onmousemove="move(event,350)" />
</div>
<div id="bigbox">
<div id="big1" ><img src="PB412C.jpg" name="bigpic" id="bigpic" width="500" height="350" /></div>
</div>
<div id="view" onmousemove="move(event,200)" ></div>
<script>window.onload=function (){aa("smallbox","bigbox","smallpic","bigpic","big1","view",200,200,200)}</script>
</body>
</html>我这个是修改网上找来的代码的!现在有个问题没解决,就是不能放大对应位置的问题!就是昨天那个框放到某个地方,右边不能正确显示那个地方的放大效果!求助!!!
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>javascript实现图片放大镜效果</title>
</head>
<body>
<style>
body{ margin:5px; overflow:auto; border:none;}
#smallbox{ overflow:hidden; background:#000; float:left; position:relative;}
#bigbox{ overflow:hidden; background:#ccc;}
#view{ border:#cd0000 solid 1px;width:0px;height:0px;position:absolute;font-size:0px}
</style>
<script type="text/javascript">
function aa(sid,bid,sp,bp,bb,v,smallw,bpw,bph){
var sid=document.getElementById(sid);
var bid=document.getElementById(bid);
var vie=document.getElementById(v);
var sp=document.getElementById(sp);
var bp=document.getElementById(bp);
bigpicX=bp.width;
bigpicY=bp.height;
sh=smallw/(bigpicX/bigpicY);
vW=100;
vH=100;
bl=bigpicX/smallw;
var sw=smallw;
if(navigator.userAgent.search('MSIE')<=0)
{
sp.style.width=350+"px";
sp.style.height=350+"px";
sid.style.width=350+"px";
sid.style.height=350+"px";
bid.style.width=500+"px";
bid.style.height=350+"px";
vie.style.width=(vW)+"px";
vie.style.height=(vH)+"px";
vie.style.left=sid.offsetLeft+"px";
vie.style.top=sid.offsetTop+"px";
}
else{
sp.style.width=350;
sp.style.height=350;
sp.style.width=350;
sp.style.height=350;
bid.style.width=480;
bid.style.height=350;
vie.style.width=vW;
vie.style.height=vH;
vie.style.left=sid.offsetLeft;
vie.style.top=sid.offsetTop;
}
}
function move(e,ssw){
var sid=document.getElementById("smallbox");
var vie=document.getElementById("view");
var bid=document.getElementById("bigbox");
var dd=document.getElementById("big1");
var bp=document.getElementById("bigpic");
ssh=ssw;
if(navigator.userAgent.search('MSIE')<=0){
var vX=e.pageX-sid.offsetLeft;
var vY=e.pageY-sid.offsetTop;}
else{
vX=e.offsetX;
vY=e.offsetY;
}
vX=vX-vW/2;
vY=vY-vH/2;
if(vX<0){vX=0;}
if(vY<0){vY=0;}
if(navigator.userAgent.search('MSIE')<=0){
if(vX>ssw-vW){vX=ssw-vW;}
if(vY>ssh-vH){vY=ssh-vH;}
dd.style.marginLeft=(-vX*bl)+"px";
dd.style.marginTop=(-vY*bl)+"px";
vie.style.left=(vX + sid.offsetLeft)+"px";
vie.style.top=(vY + sid.offsetTop)+"px";
}
else{
if(vX>ssw-vW){vX=ssw-vW-1;}
if(vY>ssh-vH){vY=ssh-vH-1;}
dd.style.marginLeft=(-vX*bl);
dd.style.marginTop=(-vY*bl);
vie.style.left=(vX + sid.offsetLeft);
vie.style.top=(vY + sid.offsetTop);
}
}
</script>
<div id="smallbox">
<img src="PB412C.jpg" width="350" height="350" id="smallpic" onmousemove="move(event,350)" />
</div>
<div id="bigbox">
<div id="big1" ><img src="PB412C.jpg" name="bigpic" id="bigpic" width="500" height="350" /></div>
</div>
<div id="view" onmousemove="move(event,200)" ></div>
<script>window.onload=function (){aa("smallbox","bigbox","smallpic","bigpic","big1","view",200,200,200)}</script>
</body>
</html>我这个是修改网上找来的代码的!现在有个问题没解决,就是不能放大对应位置的问题!就是昨天那个框放到某个地方,右边不能正确显示那个地方的放大效果!求助!!!
<script language="JavaScript">
<!--
var smallX = 200; //缩略图宽度
var bigX = 600; //预览窗大小,可以任意设置
var bigY = 450;
var srcX = -1; //原图大小,可以任意设置. 如都为-1将使用图片原始大小
var srcY = -1;
var border = 5; //边框
var smallY,viewX,viewY,bl,isIE,vX,vY;
window.onload=function (){
head.innerHTML="图片已载入";
isIE=window.event?1:0;
if (srcX==-1 && srcY==-1){srcX=bigpic.width;srcY=bigpic.height;}
else{bigpic.width=srcX;bigpic.height=srcY;}
smallY=srcY*smallX/srcX;
viewX=bigX/srcX*smallX; //预览范围
viewY=bigY/srcY*smallY;
bl=srcX/smallX; //缩小比例
smallpic.width=smallX;
smallpic.height=smallY;
smallbox.style.borderWidth=border;
smallbox.style.width=smallpic.offsetWidth+border*2*isIE;
smallbox.style.height=smallpic.offsetHeight+border*2*isIE;
bigbox.style.borderWidth=border;
bigbox.style.width=bigX+border*2*isIE;
bigbox.style.height=bigY+border*2*isIE;
view.style.left=smallbox.offsetLeft + border;
view.style.top=smallbox.offsetTop + border;
view.style.width=viewX- !isIE*3+1;
view.style.height=viewY- !isIE*3+1;
}
function move(e){
var e = window.event?window.event:e;
if (!isIE){vX=e.pageX-border-smallbox.offsetLeft;
vY=e.pageY-border-smallbox.offsetTop}
else{vX=e.offsetX;vY=e.offsetY}
vX+=-viewX/2;
vY+=-viewY/2;
if (vX < 0) vX = 0;
if (vY < 0) vY = 0;
if (vX > smallX - viewX) vX = smallX - viewX;
if (vY > smallY - viewY) vY = smallY - viewY;
bigpico.style.marginLeft = - vX * bl;
bigpico.style.marginTop = - vY * bl;
view.style.left = vX + smallbox.offsetLeft + border;
view.style.top = vY + smallbox.offsetTop + border;
}
//-->
</script>
<style type="text/css">
<!--
*{padding:0;margin:0}
body{background:black}
img{display:block;}
#smallbox{border:1px #c33 solid;float:left;width:0;height:0;overflow:hidden;font-size:0px}
#bigbox{border:1px #c33 solid;width:0px;height:0px;float:left;overflow:hidden;font-size:0px}
#view{border:1px #ddd solid;width:0px;height:0px;position:absolute;font-size:0px}
#head{text-align:center;line-height:40px;font:bold 16px/40px;color:pink}
//-->
</style>
<div id="head">图片加载中...</div>
<div id="smallbox"><img id="smallpic" src="http://images2.wowchina.com/images_wow/download/wallpapers/2007/11/7/55591.jpg" border="0" onmousemove="move(event)"></div>
<div id="bigbox"><div id="bigpico"><img id="bigpic" src="http://images2.wowchina.com/images_wow/download/wallpapers/2007/11/7/55591.jpg" border="0"></div></div>
<div id="view" onmousemove="if (!isIE) move(event)"></div>