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

　　受那位WPSXXX的 IMG大于DIV 的启发写的

　　有不足之处如果有什么好的修改或建议希望能给我一份copy 谢谢

<!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> 
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%20%0D%0Avar%20p%3D1%3B%20%0D%0Avar%20prep%3B%20%0D%0Avar%20imgp%3B%20%0D%0Avar%20px%3B%20%0D%0Avar%20py%3B%20%0D%0Avar%20msx%3B%20%0D%0Avar%20msy%3B%20%0D%0Avar%20tmpx%3B%20%0D%0Avar%20tmpy%3B%20%0D%0Avar%20dx%3D0%3B%20%0D%0Avar%20dy%3D0%3B%20%0D%0Avar%20dragfg%3Dfalse%3B%20%0D%0Afunction%20pDrag(e)%7B%20%0D%0Aif(dragfg)%7B%20%0D%0Avar%20pcon%3Ddocument.getElementById(%22ctlCenter%22)%3B%20%0D%0Avar%20pdiv%3Ddocument.getElementById(%22dragDiv%22)%3B%20%0D%0Avar%20pimg%3Ddocument.getElementById(%22pre%22)%3B%20%0D%0Avar%20dltx%3De.clientX-tmpx%3B%20%0D%0Avar%20dlty%3De.clientY-tmpy%3B%20%0D%0Avar%20marl%3D(pcon.clientWidth-pimg.width)%2F2%3B%20%0D%0Avar%20marr%3Dmarl%2Bpimg.width-pdiv.clientWidth%3B%20%0D%0Avar%20mart%3D(pcon.clientHeight-pimg.height)%2F2%3B%20%0D%0Avar%20marb%3Dmart%2Bpimg.height-pdiv.clientHeight%3B%20%0D%0Avar%20divt%3DparseInt(pdiv.style.top)%3B%20%0D%0Avar%20divl%3DparseInt(pdiv.style.left)%3B%20%0D%0Avar%20demox%3Ddivl%2Bdltx%3B%20%0D%0Avar%20demoy%3Ddivt%2Bdlty%3B%20%0D%0Aif((demox%3E%3Dmarl)%20%26%26%20(demox%3C%3Dmarr))%20pdiv.style.left%3Ddemox%2B%22px%22%3B%20%0D%0Aif((demoy%3E%3Dmart)%20%26%26%20(demoy%3C%3Dmarb))%20pdiv.style.top%3Ddemoy%2B%22px%22%3B%20%0D%0Atmpx%3De.clientX%3B%20%0D%0Atmpy%3De.clientY%3B%20%0D%0A%2F%2Freturn%20false%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0Afunction%20sDrag(e)%20%0D%0A%7B%20%0D%0Avar%20temp%20%3D%20(typeof%20e.target%20!%3D%20%22undefined%22)%3Fe.target%3Ae.srcElement%3B%20%0D%0Adx%3D0%3B%20%0D%0Ady%3D0%3B%20%0D%0Aif(!dragfg)%20%7B%20%0D%0Amsx%3De.clientX%3B%20%0D%0Amsy%3De.clientY%3B%20%0D%0A%7D%20%0D%0Aif(temp.id%3D%3D%22dragDiv%22)%7B%20%0D%0Adragfg%3Dtrue%3B%20%0D%0Apx%3D(typeof(e.offsetX)%3D%3D%22undefined%22)%3Fe.layerX-2%3Ae.offsetX%3B%20%0D%0Apy%3D(typeof(e.offsetY)%3D%3D%22undefined%22)%3Fe.layerY-2%3Ae.offsetY%3B%20%0D%0Atmpx%3De.clientX%3B%20%0D%0Atmpy%3De.clientY%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0Afunction%20eDrag(e)%7B%20%0D%0Adragfg%3Dfalse%3B%20%0D%0Avar%20scrLeft%3DparseInt(document.getElementById(%22dragDiv%22).style.left)-(document.getElementById(%22ctlCenter%22).clientWidth-document.getElementById(%22pre%22).width)%2F2%3B%20%0D%0Avar%20scrTop%3DparseInt(document.getElementById(%22dragDiv%22).style.top)-(document.getElementById(%22ctlCenter%22).clientHeight-document.getElementById(%22pre%22).height)%2F2%3B%20%0D%0Avar%20ppp%3Ddocument.getElementById(%22imgShow%22).clientWidth%2Fdocument.getElementById(%22dragDiv%22).clientWidth%3B%20%0D%0Ao.scrollTop%3DscrTop*ppp%3B%20%0D%0Ao.scrollLeft%3DscrLeft*ppp%3B%20%0D%0A%7D%20%0D%0A%3C%2Fscript%3E"> 
</head> 
<body onload="alert('Thank u for viewing'+'\n'+'Any good modify pls give me a copy'+'\n'+'sjx.saxon@gmail.com');"> 
<div> 
<div id="imgShow"> 
<img id="pic" src="http://desktop.yesky.com/picupload/20040624/1641151.jpg" _ewebeditor_ta_src="http%3A%2F%2Fdesktop.yesky.com%2Fpicupload%2F20040624%2F1641151.jpg" alt="Oops" /> 
</div> 
<div id="ctlBar"> 
<div class="ctlTop"><span onclick="document.getElementById('ctlBar').style.display='none';document.getElementById('ctlHide').style.display='block';">Hide</span>Design by saxon</div> 
<div class="ctlLeft">
T
O
O
L
S</div> 
<div class="ctlRight"> 
<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> 
</div> 
<div id="ctlCenter"><img id="pre" src="http://desktop.yesky.com/picupload/20040624/1641151.jpg" _ewebeditor_ta_src="http%3A%2F%2Fdesktop.yesky.com%2Fpicupload%2F20040624%2F1641151.jpg" alt="Oops" /> 
<div id="dragDiv" onmousedown="sDrag(event);" onmousemove="pDrag(event);" onmouseup="eDrag(event);" onmouseout="eDrag(event);"></div> 
</div> 
<div class="ctlBottom"> 
<font id="arrLeft" onmouseover="imgScroll('left');" onmouseout="mvStop();" onmousedown="sp=sp*2;" onmouseup="sp=sp/2;">←</font> 
<a href="mailto:sjx.saxon@gmail.com" _ewebeditor_ta_href="mailto%3Asjx.saxon%40gmail.com">sjx.saxon@gmail.com</a> 
<font id="arrRight" onmouseover="imgScroll('right');" onmouseout="mvStop();" onmousedown="sp=sp*2;" onmouseup="sp=sp/2;">→</font> 
</div> 
</div> 
<span id="ctlHide" onclick="document.getElementById('ctlBar').style.display='block';document.getElementById('ctlHide').style.display='none';">Display</span> 
</div> 
<p id="test"> 
<img src="http://img.ea3w.com/article/0/420/likNolm87uUbI.jpg" _ewebeditor_ta_src="http%3A%2F%2Fimg.ea3w.com%2Farticle%2F0%2F420%2FlikNolm87uUbI.jpg" alt="Oops" onclick="imgChg(this.src)" /> 
<img src="http://www.yczhang.com/upload/200606021857377727.jpg" _ewebeditor_ta_src="http%3A%2F%2Fwww.yczhang.com%2Fupload%2F200606021857377727.jpg" alt="Oops" onclick="imgChg(this.src)" /> 
<img src="http://desktop.yesky.com/picupload/20040624/1641151.jpg" _ewebeditor_ta_src="http%3A%2F%2Fdesktop.yesky.com%2Fpicupload%2F20040624%2F1641151.jpg" alt="Oops" onclick="imgChg(this.src)" /> 
<img src="http://image2.sina.com.cn/gm/o/n/2005-03-23/U508P115T9D91113F168DT20050323104505.JPG" _ewebeditor_ta_src="http%3A%2F%2Fimage2.sina.com.cn%2Fgm%2Fo%2Fn%2F2005-03-23%2FU508P115T9D91113F168DT20050323104505.JPG" alt="Oops" onclick="imgChg(this.src)" /> 
</p> 
<p>本地浏览IE下有效<input type="file" id="viewLocal" /><input type="button" value="Change Pic" onclick="chkValue('viewLocal');" /></p> 
<p>URL图片地址浏览<input type="text" id="viewOnline" /><input type="button" value="Change Pic" onclick="chkValue('viewOnline');" /></p> 
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%20%0D%0Afunction%20imgChg(s)%7B%20%0D%0Aif(document.getElementById('ctlBar').style.display%3D%3D%22none%22)%7B%20%0D%0Adocument.getElementById('ctlBar').style.display%3D%22block%22%3B%20%0D%0Adocument.getElementById('ctlHide').style.display%3D%22none%22%3B%20%0D%0Avar%20flag%3Dtrue%3B%20%0D%0A%7D%20%0D%0Avar%20newImg%3Ddocument.createElement(%22img%22)%3B%20%0D%0AnewImg.id%3D%22pre%22%3B%20%0D%0AnewImg.alt%3D%22Oops%22%3B%20%0D%0AnewImg.onmouseout%3D%22eDrag(event)%3B%22%20%0D%0AnewImg.src%3Ds%3B%20%0D%0Adocument.getElementById(%22pic%22).src%3Ds%3B%20%0D%0Adocument.getElementById(%22ctlCenter%22).replaceChild(newImg%2Cdocument.getElementById(%22pre%22))%3B%20%0D%0ApreImgInit()%3B%20%0D%0Aif(flag)%7B%20%0D%0Adocument.getElementById('ctlBar').style.display%3D%22none%22%3B%20%0D%0Adocument.getElementById('ctlHide').style.display%3D%22block%22%3B%20%0D%0A%7D%20%0D%0Ao.scrollTop%3D0%3B%20%0D%0Ao.scrollLeft%3D0%3B%20%0D%0A%7D%20%0D%0Afunction%20chkValue(ob)%20%0D%0A%7B%20%0D%0Avar%20str%3Ddocument.getElementById(ob).value.split('.')%5Bdocument.getElementById(ob).value.split('.').length-1%5D.toLowerCase()%3B%20%0D%0Aif(%2F%5Ejpg%24%7C%5Egif%24%7C%5Eico%24%7C%5Epng%24%7C%5Ebmp%24%2F.test(str))%20imgChg(document.getElementById(ob).value)%3B%20%0D%0A%7D%20%0D%0Adocument.getElementById(%22viewOnline%22).value%3D%22http%3A%2F%2Fimage2.sina.com.cn%2Fgm%2Fo%2Fn%2F2005-03-22%2FU508P115T9D90812F168DT20050322105759.jpg%22%3B%20%0D%0A%3C%2Fscript%3E"> 
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%20%0D%0Avar%20sp%3D5%3B%20%0D%0Avar%20tc%3B%20%0D%0Afunction%20imgScroll(d)%7B%20%0D%0Avar%20ptx%3Do.scrollLeft%3B%20%0D%0Avar%20pty%3Do.scrollTop%3B%20%0D%0Aif(tc)%20clearInterval(tc)%3B%20%0D%0Aif(d%3D%3D%22up%22)%7B%20%0D%0Atc%3DsetInterval(%22up()%22%2C30)%3B%20%0D%0A%7D%20%0D%0Aelse%20if(d%3D%3D%22down%22)%7B%20%0D%0Atc%3DsetInterval(%22down()%22%2C30)%3B%20%0D%0A%7D%20%0D%0Aelse%20if(d%3D%3D%22left%22)%7B%20%0D%0Atc%3DsetInterval(%22left()%22%2C30)%3B%20%0D%0A%7D%20%0D%0Aelse%20if(d%3D%3D%22right%22)%7B%20%0D%0Atc%3DsetInterval(%22right()%22%2C30)%3B%20%0D%0A%7D%20%0D%0Aelse%7B%20%0D%0Areturn%20alert(%22There%20must%20be%20something%20wrong...%22)%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0Afunction%20up()%20%7Bo.scrollTop%20-%3D%20sp%3B%20%0D%0Adocument.getElementById(%22dragDiv%22).style.top%20%3D(document.getElementById(%22ctlCenter%22).clientHeight-document.getElementById(%22pre%22).height)%2F2%2Bo.scrollTop*prep%2B%22px%22%3B%7D%20%0D%0Afunction%20down()%20%7Bo.scrollTop%20%2B%3D%20sp%3B%20%0D%0Adocument.getElementById(%22dragDiv%22).style.top%20%3D(document.getElementById(%22ctlCenter%22).clientHeight-document.getElementById(%22pre%22).height)%2F2%2Bo.scrollTop*prep%2B%22px%22%3B%7D%20%0D%0Afunction%20left()%20%7Bo.scrollLeft%20-%3D%20sp%3B%20%0D%0Adocument.getElementById(%22dragDiv%22).style.left%20%3D(document.getElementById(%22ctlCenter%22).clientWidth-document.getElementById(%22pre%22).width)%2F2%2Bo.scrollLeft*prep%2B%22px%22%3B%7D%20%0D%0Afunction%20right()%20%7Bo.scrollLeft%20%2B%3D%20sp%3B%20%0D%0Adocument.getElementById(%22dragDiv%22).style.left%20%3D(document.getElementById(%22ctlCenter%22).clientWidth-document.getElementById(%22pre%22).width)%2F2%2Bo.scrollLeft*prep%2B%22px%22%3B%7D%20%0D%0Afunction%20mvStop()%20%0D%0A%7B%20%0D%0Aif(tc)%20clearInterval(tc)%3B%20%0D%0A%7D%20%0D%0A%3C%2Fscript%3E"> 
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%20%0D%0Afunction%20preImgInit()%7B%20%0D%0Avar%20imgx%3Ddocument.getElementById(%22pre%22).width%3B%20%0D%0Avar%20imgy%3Ddocument.getElementById(%22pre%22).height%3B%20%0D%0Aif(imgx%3D%3Dimgy)%20%0D%0A%7B%20%0D%0Adocument.getElementById(%22pre%22).style.width%3D%22100%25%22%3B%20%0D%0Adocument.getElementById(%22pre%22).style.height%3D%22100%25%22%3B%20%0D%0Aprep%3Ddocument.getElementById(%22pre%22).clientHeight%2Fimgy%3B%20%0D%0Aimgp%3Ddocument.getElementById(%22imgShow%22).clientHeight%2Fimgy%3B%20%0D%0Adocument.getElementById(%22dragDiv%22).style.width%3Dimgp*document.getElementById(%22pre%22).clientHeight%2B%22px%22%3B%20%0D%0Adocument.getElementById(%22dragDiv%22).style.height%3Dimgp*document.getElementById(%22pre%22).clientHeight%2B%22px%22%3B%20%0D%0Adocument.getElementById(%22dragDiv%22).style.left%3D%220px%22%3B%20%0D%0Adocument.getElementById(%22dragDiv%22).style.top%3D%220px%22%3B%20%0D%0A%7D%20%0D%0Aelse%20if(imgx%3Eimgy)%20%0D%0A%7B%20%0D%0Adocument.getElementById(%22pre%22).style.width%3D%22100%25%22%3B%20%0D%0Adocument.getElementById(%22pre%22).style.height%3Dimgy%2Fimgx*100%2B%22%25%22%3B%20%0D%0Aprep%3Ddocument.getElementById(%22pre%22).clientWidth%2Fimgx%3B%20%0D%0Aimgp%3Ddocument.getElementById(%22imgShow%22).clientWidth%2Fimgx%3B%20%0D%0Adocument.getElementById(%22dragDiv%22).style.width%3Dimgp*document.getElementById(%22pre%22).clientWidth%2B%22px%22%3B%20%0D%0Adocument.getElementById(%22dragDiv%22).style.height%3Dimgp*document.getElementById(%22pre%22).clientWidth%2B%22px%22%3B%20%0D%0Adocument.getElementById(%22dragDiv%22).style.left%3D%220px%22%3B%20%0D%0Adocument.getElementById(%22dragDiv%22).style.top%3D(document.getElementById(%22ctlCenter%22).clientHeight-document.getElementById(%22pre%22).height)%2F2%2B%22px%22%3B%20%0D%0Adocument.getElementById(%22pre%22).style.top%3D(document.getElementById(%22ctlCenter%22).clientHeight-document.getElementById(%22pre%22).height)%2F2%2B%22px%22%3B%20%0D%0A%7D%20%0D%0Aelse%20%0D%0A%7B%20%0D%0Adocument.getElementById(%22pre%22).style.height%3D%22100%25%22%3B%20%0D%0Adocument.getElementById(%22pre%22).style.width%3Dimgx%2Fimgy*100%2B%22%25%22%3B%20%0D%0Aprep%3Ddocument.getElementById(%22pre%22).clientHeight%2Fimgy%3B%20%0D%0Aimgp%3Ddocument.getElementById(%22imgShow%22).clientHeight%2Fimgy%3B%20%0D%0Adocument.getElementById(%22dragDiv%22).style.width%3Dimgp*document.getElementById(%22pre%22).clientHeight%2B%22px%22%3B%20%0D%0Adocument.getElementById(%22dragDiv%22).style.height%3Dimgp*document.getElementById(%22pre%22).clientHeight%2B%22px%22%3B%20%0D%0Adocument.getElementById(%22dragDiv%22).style.top%3D%220px%22%3B%20%0D%0Adocument.getElementById(%22dragDiv%22).style.left%3D(document.getElementById(%22pre%22).offsetLeft-1)%2B%22px%22%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0Adocument.body.onselectstart%3Dfunction()%7Breturn%20false%7D%3B%20%0D%0ApreImgInit()%3B%20%0D%0Avar%20o%3Ddocument.getElementById(%22imgShow%22)%3B%20%0D%0A%3C%2Fscript%3E"> 
</body> 
</html>

　　 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

　　(不会封装代码有待更一步优化...)

　　关于层拖动第一次写参考了一些别人的方法直接在mousedown里加mousemove事件在mouseup里取消move事件写不来只能手动加在div上面加3个事件...

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

　　打包文件下载

教程首页更多教程