图片放大查看效果
- <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 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>
- <div id="head">图片loading...</div>
- <div id="smallbox"><img src="http://images2.wowchina.com/images_wow/download/wallpapers/2007/11/7/55591.jpg" border="0"></div>
- <div id="bigbox"><div id="bigpico"><img src="http://images2.wowchina.com/images_wow/download/wallpapers/2007/11/7/55591.jpg" border="0"></div></div>
- <div id="view"></div>
