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程序设计有所帮助。