It was originally intended to be compatible with browsers such as Netscape and FireFox, but these browsers do not support Style.pixelleft, and have to use Style.left and the like (Style.pixelleft is a number without units, Style.left For the text has units, the actual use found that the effect is very bad, there is a delay, so or use Style.pixelleft, the disadvantage is only to support IE series browser.
<ptml> <pead> <meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "> <title> Mouse Box selection box </title> </pead> <body> <div id=" box "></div> ; <script language= "JavaScript" > <!--var box = document.getElementById ("box"); var boxworking = false; var startpointx = 0; var startpointy = 0; will move the mouse, prepare the mouse box marquee, set the relevant data//only left mouse button or right key valid//In the client area is valid, in the scroll bar area is invalid (scroll bar area is document.body, but not belong to the Document.body customer area) function Startbox () {//mouse button to determine if (event.button!=1 && event.button!=2) {return; }//Mouse position judgment if (Event.clientx>document.body.clientwidth | | event.clienty>document.body.clientheight) {return; } Startpointx = Document.body.scrollLeft + event.clientx; Startpointy = Document.body.scrollTop + event.clienty; Box.style.pixelLeft = Startpointx; Box.style.pixelTop = Startpointy; box.style.pixelWidth = 0; Box.style.pixelheight = 0; Box.style.display = "block"; Boxworking = true; //Change mouse box marquee size function Resizebox () {//must first press the left mouse button or right button if (!boxworking) {return; var endpointx = document.body.scrollLeft + event.clientx; var endpointy = Document.body.scrollTop + event.clienty; Whether the mouse moves left or right if (Endpointx >= startpointx) {box.style.pixelLeft = Startpointx; Box.style.pixelWidth = Endpointx-startpointx; else {box.style.pixelLeft = Endpointx; Box.style.pixelWidth = Startpointx-endpointx; //Move the mouse up or down if (Endpointy >= startpointy) {box.style.pixelTop = Startpointy; Box.style.pixelHeight = Endpointy-startpointy; else {box.style.pixelTop = Endpointy; Box.style.pixelHeight = Startpointy-endpointy; }//mouse move end, hide Mouse box marquee, set relevant data//only left mouse button or right key when effective function Endbox() {///mouse button to determine if (event.button!=1 && event.button!=2) {return; } Box.style.display = "None"; Boxworking = false; } document.body.onmousedown= Startbox; Document.body.onmousemove = Resizebox; Document.body.onmouseup = Endbox; --> </script> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
The following is only valid in the area
<ptml> <pead> <meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "> <title> Mouse Box selection box </title> </pead> <body> <div id=" Content "> <div id= "box" ></div> </div> <script language= "JavaScript" > <!--var content = document . getElementById ("content"); var box = document.getElementById ("box"); var boxworking = false; var startpointx = 0; var startpointy = 0; will move the mouse, prepare the mouse box marquee, set the relevant data//only left mouse button or right key valid//In the client area is valid, in the scroll bar area is invalid (scroll bar area is document.body, but not belong to the Document.body customer area) function Startbox () {//mouse button to determine if (event.button!=1 && event.button!=2) {return; }//Mouse position judgment if (Event.clientx>document.body.clientwidth | | event.clienty>document.body.clientheight) {return; } Startpointx = Document.body.scrollLeft + event.clientx; Startpointy = Document.body.scrollTop + event.clienty; Box.style.piXelleft = Startpointx; Box.style.pixelTop = Startpointy; box.style.pixelWidth = 0; box.style.pixelHeight = 0; Box.style.display = "block"; Boxworking = true; //Change mouse box marquee size function Resizebox () {//must first press the left mouse button or right button if (!boxworking) {return; var endpointx = document.body.scrollLeft + event.clientx; var endpointy = Document.body.scrollTop + event.clienty; Mouse left or right shift if (Endpointx >= startpointx) {endpointx = endpointx<= (content.offsetleft+content.o ffsetwidth)? Endpointx: (Content.offsetleft + content.offsetwidth); Box.style.pixelLeft = Startpointx; Box.style.pixelWidth = Endpointx-startpointx; else {Endpointx = (endpointx>=content.offsetleft)? EndPointX:content.offsetLeft; Box.style.pixelLeft = Endpointx; Box.style.pixelWidth = Startpointx-endpointx; //Move the mouse up or down if (Endpointy >= STARtpointy) {Endpointy = (endpointy<= (content.offsettop+content.offsetheight))? Endpointy: (Content.offsetT OP + content.offsetheight); Box.style.pixelTop = Startpointy; Box.style.pixelHeight = Endpointy-startpointy; else {Endpointy = (endpointy>=content.offsettop)? EndPointY:content.offsetTop; Box.style.pixelTop = Endpointy; Box.style.pixelHeight = Startpointy-endpointy; }//mouse move over, hide the mouse box marquee, set the relevant data//only left mouse button or right key when the effective function Endbox () {//mouse button to judge if (Event.button!=1 && event.button!=2) {return; } Box.style.display = "None"; Boxworking = false; } content.onmousedown= Startbox; Document.body.onmousemove = Resizebox; Document.body.onmouseup = Endbox; --> </script> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
