html5实现鼠标框选,JS实现鼠标框选效果完整实例

本文实例讲述了JS实现鼠标框选效果的方法。分享给大家供大家参考，具体如下：

/p>

"http://www.w3.org/TR/html4/strict.dtd">

鼠标框选效果

*{

padding:0;

margin:0;

}

#bottom{

position:absolute;

bottom:0px;

width:100%;

height:40px;

border:1px solid #000;

background:#000;

color:#fff;

}

.tempDiv{

border:1px dashed blue;

background:#5a72f8;

position:absolute;

width:0;

height:0;

filter:alpha(opacity:10);

opacity:0.1

}

window.onload = function(){

var stateBar = document.getElementById("bottom");

document.onmousedown = function(e){

var posx = e.clientX;

var posy = e.clientY;

var div = document.createElement("div");

div.className = "tempDiv";

div.style.left = e.clientX+"px";

div.style.top = e.clientY+"px";

document.body.appendChild(div);

document.onmousemove = function(ev){

div.style.left = Math.min(ev.clientX, posx) + "px";

div.style.top = Math.min(ev.clientY, posy) + "px";

div.style.width = Math.abs(posx - ev.clientX)+"px";

div.style.height = Math.abs(posy - ev.clientY)+"px";

stateBar.innerHTML = "MouseX: " + ev.clientX + "
MouseY: " + ev.clientY;

document.onmouseup = function(){

div.parentNode.removeChild(div);

document.onmousemove = null;

document.onmouseup = null;

}

}

}

}

希望本文所述对大家JavaScript程序设计有所帮助。