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

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

sjx.saxon@gmail.com

Map Image * {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;} 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=mart) && (demoyimgy) { 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");

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

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

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

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

打包文件下载