javascript实现淡蓝色的鼠标拖动选择框实例
本文实例讲述了javascript实现淡蓝色的鼠标拖动选择框。分享给大家供大家参考。具体实现方法如下:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"> <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> <styletype="text/css"> #rectBox { background:#CCFFFF; border:2pxsolid#0099FF; filter:alpha(opacity=30); opacity:0.3; position:absolute; } </style> <head> <title>一个鼠标选择框</title> <scripttype="text/javascript"> functionRect() { this.doc=document.documentElement; if(!this.doc)return; this.startX=''; this.startY=''; this.rect=null; rectSelf=this; } Rect.prototype.down=function(e) { vare=e?e:window.event; rectSelf.startX=e.clientX?e.clientX+document.body.scrollLeft:e.pageX; rectSelf.startY=e.clientY?e.clientY+document.body.scrollTop:e.pageY; rectSelf.showRect(true); } Rect.prototype.up=function(e) { rectSelf.rectBox.style.width='0px'; rectSelf.rectBox.style.height='0px'; rectSelf.showRect(false); } Rect.prototype.move=function(e) { if(rectSelf.rectBox) { varcurrentX=e.clientX?e.clientX+rectSelf.doc.scrollLeft:e.pageX; varcurrentY=e.clientY?e.clientY+rectSelf.doc.scrollTop:e.pageY; rectSelf.rectBox.style.width=Math.abs(currentX-rectSelf.startX)+'px'; rectSelf.rectBox.style.height=Math.abs(currentY-rectSelf.startY)+'px'; if(currentX-rectSelf.startX<0) { rectSelf.rectBox.style.left=currentX+'px'; } if(currentY-rectSelf.startY<0) { rectSelf.rectBox.style.top=currentY+'px'; } //document.title="left:"+currentX+'px'+"top:"+currentY+'px'; } } Rect.prototype.showRect=function(bool) { if(bool) { if(!this.rectBox) { this.rectBox=document.createElement("div"); this.rectBox.id="rectBox"; document.body.appendChild(this.rectBox); } this.rectBox.style.display="block"; this.rectBox.style.left=this.startX+'px'; this.rectBox.style.top=this.startY+'px'; this.addEventListener(this.doc,'mousemove',this.move); } else { if(this.rectBox) { this.rectBox.style.display="none"; } this.removeEventListener(this.doc,'mousemove',this.move); } } Rect.prototype.addEventListener=function(o,e,l) { if(o.addEventListener){ o.addEventListener(e,l,false); }elseif(o.attachEvent){ o.attachEvent('on'+e,function(){ l(window.event); }); } } Rect.prototype.removeEventListener=function(o,e,l) { if(o.removeEventListener){ o.removeEventListener(e,l,false); }elseif(o.detachEvent){ o.detachEvent('on'+e,function(){ l(window.event); }); } } window.onload=function() { varoRect=newRect(); oRect.addEventListener(oRect.doc,'mousedown',oRect.down); oRect.addEventListener(oRect.doc,'mouseup',oRect.up); } </script> </head> <body> <h1>拖动你的鼠标就会出现选择框</h1> </body> </html>
希望本文所述对大家的javascript程序设计有所帮助。