家园
个人
文集
http://
www
.
5x54
.
com
图片放大查看效果
作者：
网上收集
点击：
读取中...
次
引用代码：
<script language="JavaScript">
(%$$247#^67)心情家园www.bbsdiy.net
<!--
(%$$247#^67)心情家园www.bbsdiy.net
var smallX = 200; //缩略图宽度
(%$$247#^67)心情家园www.bbsdiy.net
var bigX = 600; //预览窗大小,可以任意设置
(%$$247#^67)心情家园www.bbsdiy.net
var bigY = 450;
(%$$247#^67)心情家园www.bbsdiy.net
var srcX = -1; //原图大小,可以任意设置. 如都为-1将使用图片原始大小
(%$$247#^67)心情家园www.bbsdiy.net
var srcY = -1;
(%$$247#^67)心情家园www.bbsdiy.net
var border = 5; //边框
(%$$247#^67)心情家园www.bbsdiy.net
var smallY,viewX,viewY,bl,isIE,vX,vY;
(%$$247#^67)心情家园www.bbsdiy.net
window.onload=function (){
(%$$247#^67)心情家园www.bbsdiy.net
head.innerHTML="图片已载入";
(%$$247#^67)心情家园www.bbsdiy.net
isIE=window.event?1:0;
(%$$247#^67)心情家园www.bbsdiy.net
if (srcX==-1 && srcY==-1){srcX=bigpic.width;srcY=bigpic.height;}
(%$$247#^67)心情家园www.bbsdiy.net
else{bigpic.width=srcX;bigpic.height=srcY;}
(%$$247#^67)心情家园www.bbsdiy.net
smallY=srcY*smallX/srcX;
(%$$247#^67)心情家园www.bbsdiy.net
viewX=bigX/srcX*smallX; //预览范围
(%$$247#^67)心情家园www.bbsdiy.net
viewY=bigY/srcY*smallY;
(%$$247#^67)心情家园www.bbsdiy.net
bl=srcX/smallX; //缩小比例
(%$$247#^67)心情家园www.bbsdiy.net
smallpic.width=smallX;
(%$$247#^67)心情家园www.bbsdiy.net
smallpic.height=smallY;
(%$$247#^67)心情家园www.bbsdiy.net
smallbox.style.borderWidth=border;
(%$$247#^67)心情家园www.bbsdiy.net
smallbox.style.width=smallpic.offsetWidth+border*2*isIE;
(%$$247#^67)心情家园www.bbsdiy.net
smallbox.style.height=smallpic.offsetHeight+border*2*isIE;
(%$$247#^67)心情家园www.bbsdiy.net
bigbox.style.borderWidth=border;
(%$$247#^67)心情家园www.bbsdiy.net
bigbox.style.width=bigX+border*2*isIE;
(%$$247#^67)心情家园www.bbsdiy.net
bigbox.style.height=bigY+border*2*isIE;
(%$$247#^67)心情家园www.bbsdiy.net
view.style.left=smallbox.offsetLeft + border;
(%$$247#^67)心情家园www.bbsdiy.net
view.style.top=smallbox.offsetTop + border;
(%$$247#^67)心情家园www.bbsdiy.net
view.style.width=viewX- !isIE*3+1;
(%$$247#^67)心情家园www.bbsdiy.net
view.style.height=viewY- !isIE*3+1;
(%$$247#^67)心情家园www.bbsdiy.net
}
(%$$247#^67)心情家园www.bbsdiy.net
function move(e){
(%$$247#^67)心情家园www.bbsdiy.net
var e = window.event?window.event:e;
(%$$247#^67)心情家园www.bbsdiy.net
if (!isIE){vX=e.pageX-border-smallbox.offsetLeft;
(%$$247#^67)心情家园www.bbsdiy.net
vY=e.pageY-border-smallbox.offsetTop}
(%$$247#^67)心情家园www.bbsdiy.net
else{vX=e.offsetX;vY=e.offsetY}
(%$$247#^67)心情家园www.bbsdiy.net
vX+=-viewX/2;
(%$$247#^67)心情家园www.bbsdiy.net
vY+=-viewY/2;
(%$$247#^67)心情家园www.bbsdiy.net
if (vX < 0) vX = 0;
(%$$247#^67)心情家园www.bbsdiy.net
if (vY < 0) vY = 0;
(%$$247#^67)心情家园www.bbsdiy.net
if (vX > smallX - viewX) vX = smallX - viewX;
(%$$247#^67)心情家园www.bbsdiy.net
if (vY > smallY - viewY) vY = smallY - viewY;
(%$$247#^67)心情家园www.bbsdiy.net
bigpico.style.marginLeft = - vX * bl;
(%$$247#^67)心情家园www.bbsdiy.net
bigpico.style.marginTop = - vY * bl;
(%$$247#^67)心情家园www.bbsdiy.net
view.style.left = vX + smallbox.offsetLeft + border;
(%$$247#^67)心情家园www.bbsdiy.net
view.style.top = vY + smallbox.offsetTop + border;
(%$$247#^67)心情家园www.bbsdiy.net
}
(%$$247#^67)心情家园www.bbsdiy.net
//-->
(%$$247#^67)心情家园www.bbsdiy.net
</script>
(%$$247#^67)心情家园www.bbsdiy.net
<style type="text/css">
(%$$247#^67)心情家园www.bbsdiy.net
<!--
(%$$247#^67)心情家园www.bbsdiy.net
*{padding:0;margin:0}
(%$$247#^67)心情家园www.bbsdiy.net
body{background:black}
(%$$247#^67)心情家园www.bbsdiy.net
img{display:block;}
(%$$247#^67)心情家园www.bbsdiy.net
#smallbox{border:1px #c33 solid;float:left;width:0;height:0;overflow:hidden;font-size:0px}
(%$$247#^67)心情家园www.bbsdiy.net
#bigbox{border:1px #c33 solid;width:0px;height:0px;float:left;overflow:hidden;font-size:0px}
(%$$247#^67)心情家园www.bbsdiy.net
#view{border:1px #ddd solid;width:0px;height:0px;position:absolute;font-size:0px}
(%$$247#^67)心情家园www.bbsdiy.net
#head{text-align:center;line-height:40px;font:bold 16px/40px;color:pink}
(%$$247#^67)心情家园www.bbsdiy.net
//-->
(%$$247#^67)心情家园www.bbsdiy.net
</style>
(%$$247#^67)心情家园www.bbsdiy.net
<div id="head">图片loading...</div>
(%$$247#^67)心情家园www.bbsdiy.net
<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>
(%$$247#^67)心情家园www.bbsdiy.net
<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>
(%$$247#^67)心情家园www.bbsdiy.net
<div id="view" onmousemove="if (!isIE) move(event)"></div>
收藏此文章
打印
更新
编辑此文章
『关闭窗口』
