推荐一个不错的图片浏览效果

受那位WPSXXX的 IMG大于DIV 的启发写的
有不足之处如果有什么好的修改或建议希望能给我一份copy 谢谢
sjx.saxon@gmail.com

<！DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Map Image</title> <style type="text/css"> * {margin:0px auto;padding:0px;text-align:center;} * {font-size:9pt;font-family:Arial;} body {margin-top:20px;} body{-moz-user-select: none;-khtml-user-select: none;user-select: none;} div {position:relative;width:400px;height:400px;} font {cursor:default;color:red;font-weight:bold;line-height:16px;border:solid 1px red;} /* Img Show Zone */ #imgShow {border:solid 1px red;width:400px;height:400px;overflow:hidden;} #imgShow img {border:none;} /* Control Bar Style */ #ctlBar {position:absolute;bottom:0px;right:0px;width:140px;height:140px;border:solid 1px red;overflow:hidden;} #ctlBar[id] {bottom:-2px;right:-2px;} .ctlTop {width:100%;height:15%;overflow:hidden;cursor:default;color:snow;} .ctlBottom {width:100%;height:15%;clear:both;overflow:hidden;} .ctlLeft {width:15%;height:70%;float:left;overflow:hidden;color:orange;cursor:default;font-weight:bold;} .ctlRight {width:15%;height:70%;float:right;overflow:hidden;} #ctlBar img {border:none;display:block;} .ctlBottom a {color:snow;text-decoration:none;float:left;font-size:7pt;margin-top:5px;margin-left:2px;margin-right:2px;} * html .ctlBottom a {margin-left:0px;margin-right:0px;} .ctlBottom a:hover {color:#3cf;} #arrUp {position:absolute;left:0px;margin:2px;width:16px;height:16px;} #arrDown {position:absolute;bottom:0px;left:0px;margin:2px;width:16px;height:16px;} #arrLeft {float:left;margin:2px;width:16px;height:16px;} #arrRight {float:right;margin:2px;width:16px;height:16px;} .ctlTop span {font-weight:bold;font-family:Arial;color:red;float:right;padding:1px 3px 1px 3px;cursor:pointer;} #ctlCenter {width:70%;height:70%;float:left;overflow:hidden;} #dragDiv {position:absolute;border:solid 1px blue;height:80px;width:80px;opacity:0.5;background:orange;} * html #dragDiv {filter: progid:DXImageTransform.Microsoft.Alpha （opacity=50）;} #pre {position:relative;} /* top:0px;left:0px; *//* Hide ctl bar */ #ctlHide {position:absolute;right:-1px;bottom:-1px;padding:1px 3px 1px 3px;background-color:red;color:snow;cursor:pointer;display:none;font-weight:bold;} * html #ctlHide {right:0px;bottom:0px;} /* Test Other Parts */ #test {margin-top:10px;} #test img{width:120px;height:120px;margin:5px 5px;padding:0px;border:solid 1px dodgerblue;cursor:pointer;} </style> <script type="text/javascript"> var p=1; var prep; var imgp; var px; var py; var msx; var msy; var tmpx; var tmpy; var dx=0; var dy=0; var dragfg=false; function pDrag（e）{ if（dragfg）{ var pcon=document.getElementById（"ctlCenter"）; var pdiv=document.getElementById（"dragDiv"）; var pimg=document.getElementById（"pre"）; var dltx=e.clientX-tmpx; var dlty=e.clientY-tmpy; var marl=（pcon.clientWidth-pimg.width）/2; var marr=marl+pimg.width-pdiv.clientWidth; var mart=（pcon.clientHeight-pimg.height）/2; var marb=mart+pimg.height-pdiv.clientHeight; var divt=parseInt（pdiv.style.top）; var divl=parseInt（pdiv.style.left）; var demox=divl+dltx; var demoy=divt+dlty; if（（demox>=marl） && （demox<=marr）） pdiv.style.left=demox+"px"; if（（demoy>=mart） && （demoy<=marb）） pdiv.style.top=demoy+"px"; tmpx=e.clientX; tmpy=e.clientY; //return false; } } function sDrag（e） { var temp = （typeof e.target ！= "undefined"）？e.target:e.srcElement; dx=0; dy=0; if（！dragfg） { msx=e.clientX; msy=e.clientY; } if（temp.id=="dragDiv"）{ dragfg=true; px=（typeof（e.offsetX）=="undefined"）？e.layerX-2:e.offsetX; py=（typeof（e.offsetY）=="undefined"）？e.layerY-2:e.offsetY; tmpx=e.clientX; tmpy=e.clientY; } } function eDrag（e）{ dragfg=false; var scrLeft=parseInt（document.getElementById（"dragDiv"）.style.left）-（document.getElementById（"ctlCenter"）.clientWidth-document.getElementById（"pre"）.width）/2; var scrTop=parseInt（document.getElementById（"dragDiv"）.style.top）-（document.getElementById（"ctlCenter"）.clientHeight-document.getElementById（"pre"）.height）/2; var ppp=document.getElementById（"imgShow"）.clientWidth/document.getElementById（"dragDiv"）.clientWidth; o.scrollTop=scrTop*ppp; o.scrollLeft=scrLeft*ppp; } </script> </head> <body onload="alert（"Thank u for viewing"+"
"+"Any good modify pls give me a copy"+"
"+"sjx.saxon@gmail.com"）;"> <img id="pic" src="http://desktop.yesky.com/picupload/20040624/1641151.jpg" alt="Oops" /> <span onclick="document.getElementById（"ctlBar"）.style.display="none";document.getElementById（"ctlHide"）.style.display="block";">Hide</span>Design by saxon TOOLS<font id="arrUp" onmouseover="imgScroll（"up"）;" onmouseout="mvStop（）;" onmousedown="sp=sp*2;" onmouseup="sp=sp/2;">↑</font> <font id="arrDown" onmouseover="imgScroll（"down"）;" onmouseout="mvStop（）;" onmousedown="sp=sp*2;" onmouseup="sp=sp/2;">↓</font><img id="pre" src="http://desktop.yesky.com/picupload/20040624/1641151.jpg" alt="Oops" /><font id="arrLeft" onmouseover="imgScroll（"left"）;" onmouseout="mvStop（）;" onmousedown="sp=sp*2;" onmouseup="sp=sp/2;">←</font> sjx.saxon@gmail.com <font id="arrRight" onmouseover="imgScroll（"right"）;" onmouseout="mvStop（）;" onmousedown="sp=sp*2;" onmouseup="sp=sp/2;">→</font> <span id="ctlHide" onclick="document.getElementById（"ctlBar"）.style.display="block";document.getElementById（"ctlHide"）.style.display="none";">Display</span><p id="test"> <img src="http://img.ea3w.com/article/0/420/likNolm87uUbI.jpg" alt="Oops" onclick="imgChg（this.src）" /> <img src="http://www.yczhang.com/upload/200606021857377727.jpg" alt="Oops" onclick="imgChg（this.src）" /> <img src="http://desktop.yesky.com/picupload/20040624/1641151.jpg" alt="Oops" onclick="imgChg（this.src）" /> <img src="http://image2.sina.com.cn/gm/o/n/2005-03-23/U508P115T9D91113F168DT20050323104505.JPG" alt="Oops" onclick="imgChg（this.src）" /> <br/> 本地浏览IE下有效<input type="file" id="viewLocal" /><input type="button" value="Change Pic" onclick="chkValue（"viewLocal"）;" /><br/> URL图片地址浏览<input type="text" id="viewOnline" /><input type="button" value="Change Pic" onclick="chkValue（"viewOnline"）;" /><br/> <script type="text/javascript"> function imgChg（s）{ if（document.getElementById（"ctlBar"）.style.display=="none"）{ document.getElementById（"ctlBar"）.style.display="block"; document.getElementById（"ctlHide"）.style.display="none"; var flag=true; } var newImg=document.createElement（"img"）; newImg.id="pre"; newImg.alt="Oops"; newImg.onmouseout="eDrag（event）;" newImg.src=s; document.getElementById（"pic"）.src=s; document.getElementById（"ctlCenter"）.replaceChild（newImg,document.getElementById（"pre"））; preImgInit（）; if（flag）{ document.getElementById（"ctlBar"）.style.display="none"; document.getElementById（"ctlHide"）.style.display="block"; } o.scrollTop=0; o.scrollLeft=0; } function chkValue（ob） { var str=document.getElementById（ob）.value.split（"."）[document.getElementById（ob）.value.split（"."）.length-1].toLowerCase（）; if（/^jpg$|^gif$|^ico$|^png$|^bmp$/.test（str）） imgChg（document.getElementById（ob）.value）; } document.getElementById（"viewOnline"）.value="http://image2.sina.com.cn/gm/o/n/2005-03-22/U508P115T9D90812F168DT20050322105759.jpg"; </script> <script type="text/javascript"> var sp=5; var tc; function imgScroll（d）{ var ptx=o.scrollLeft; var pty=o.scrollTop; if（tc） clearInterval（tc）; if（d=="up"）{ tc=setInterval（"up（）",30）; } else if（d=="down"）{ tc=setInterval（"down（）",30）; } else if（d=="left"）{ tc=setInterval（"left（）",30）; } else if（d=="right"）{ tc=setInterval（"right（）",30）; } else{ return alert（"There must be something wrong..."）; } } function up（） {o.scrollTop -= sp; document.getElementById（"dragDiv"）.style.top =（document.getElementById（"ctlCenter"）.clientHeight-document.getElementById（"pre"）.height）/2+o.scrollTop*prep+"px";} function down（） {o.scrollTop += sp; document.getElementById（"dragDiv"）.style.top =（document.getElementById（"ctlCenter"）.clientHeight-document.getElementById（"pre"）.height）/2+o.scrollTop*prep+"px";} function left（） {o.scrollLeft -= sp; document.getElementById（"dragDiv"）.style.left =（document.getElementById（"ctlCenter"）.clientWidth-document.getElementById（"pre"）.width）/2+o.scrollLeft*prep+"px";} function right（） {o.scrollLeft += sp; document.getElementById（"dragDiv"）.style.left =（document.getElementById（"ctlCenter"）.clientWidth-document.getElementById（"pre"）.width）/2+o.scrollLeft*prep+"px";} function mvStop（） { if（tc） clearInterval（tc）; } </script> <script type="text/javascript"> function preImgInit（）{ var imgx=document.getElementById（"pre"）.width; var imgy=document.getElementById（"pre"）.height; if（imgx==imgy） { document.getElementById（"pre"）.style.width="100%"; document.getElementById（"pre"）.style.height="100%"; prep=document.getElementById（"pre"）.clientHeight/imgy; imgp=document.getElementById（"imgShow"）.clientHeight/imgy; document.getElementById（"dragDiv"）.style.width=imgp*document.getElementById（"pre"）.clientHeight+"px"; document.getElementById（"dragDiv"）.style.height=imgp*document.getElementById（"pre"）.clientHeight+"px"; document.getElementById（"dragDiv"）.style.left="0px"; document.getElementById（"dragDiv"）.style.top="0px"; } else if（imgx>imgy） { document.getElementById（"pre"）.style.width="100%"; document.getElementById（"pre"）.style.height=imgy/imgx*100+"%"; prep=document.getElementById（"pre"）.clientWidth/imgx; imgp=document.getElementById（"imgShow"）.clientWidth/imgx; document.getElementById（"dragDiv"）.style.width=imgp*document.getElementById（"pre"）.clientWidth+"px"; document.getElementById（"dragDiv"）.style.height=imgp*document.getElementById（"pre"）.clientWidth+"px"; document.getElementById（"dragDiv"）.style.left="0px"; document.getElementById（"dragDiv"）.style.top=（document.getElementById（"ctlCenter"）.clientHeight-document.getElementById（"pre"）.height）/2+"px"; document.getElementById（"pre"）.style.top=（document.getElementById（"ctlCenter"）.clientHeight-document.getElementById（"pre"）.height）/2+"px"; } else { document.getElementById（"pre"）.style.height="100%"; document.getElementById（"pre"）.style.width=imgx/imgy*100+"%"; prep=document.getElementById（"pre"）.clientHeight/imgy; imgp=document.getElementById（"imgShow"）.clientHeight/imgy; document.getElementById（"dragDiv"）.style.width=imgp*document.getElementById（"pre"）.clientHeight+"px"; document.getElementById（"dragDiv"）.style.height=imgp*document.getElementById（"pre"）.clientHeight+"px"; document.getElementById（"dragDiv"）.style.top="0px"; document.getElementById（"dragDiv"）.style.left=（document.getElementById（"pre"）.offsetLeft-1）+"px"; } } document.body.onselectstart=function（）{return false}; preImgInit（）; var o=document.getElementById（"imgShow"）; </script> </body> </html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]
（不会封装代码有待更一步优化...）
关于层拖动第一次写参考了一些别人的方法直接在mousedown里加mousemove事件在mouseup里取消move事件写不来只能手动加在div上面加3个事件...

PS:貌似这素自从加入51js后第2个原创（也不知道别人写过没应该写过吧...）记的没错的话和第一次写相隔了4年多了...-_-|||...看着代码能运行感觉真好早知道应该考计算机系的...

打包文件下载