Inspired by the Wpsxxx's IMG, more than the Div.
There are deficiencies if there are any good changes or suggestions wish to give me a copy thank you
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" > <pead> <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;c Olor: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> </pead> <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" > </div> <div id= "Ctlbar" > <div class= "ctltop" ><span o nclick= "document.getElementById" (' Ctlbar '). style.display= ' None ';d ocument.getelementbyid (' Ctlhide '). style.display= ' block '; >hide</span>design by saxon</div> <div class= "Ctlleft" > T o o L s</div> <div class= "CtlRig" HT "> <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" > <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> sjx.saxon@gmail.com <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 ';d ocument.getelementbyid (' Ctlhide '). style.display= ' None '; >Display</span> </div> <p id= "Test" > </p> <p> Local browsing ie effective <input type= "file" I D= "viewlocal"/><input type= "button" value= "Change Pic" onclick= "chkValue (' viewlocal '); "/></p> <p>url picture address browse <input type=" text "id=" Viewonline "/><input type=" Button "value=" Change Pic "onclick=" Chkvalue (' Viewonline ');/></p> <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 is 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> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
(Does not encapsulate code needs to be optimized ...)
About layer Drag first write reference some other people's method directly in MouseDown Riga MouseMove event in MouseUp cancel move event write can only manually add to the div plus 3 events ...
PS: It seems this element since adding 51JS after the 2nd original (also do not know if someone else did not write it should be written ...) the correct words and the first write is separated for more than 4 years ...-_-| | | ... It feels good to see the code running. I know I should have been in the computer department ...
Package file Download
