鼠标选取框

<html>
<head>
<title> 鼠标选取框 </title>
<script language="JavaScript">
var x0;
var y0;
var select=false;

function document.onmousedown()
{
    x0=document.body.scrollLeft+event.clientX;// 鼠标起始横坐标
    y0=document.body.scrollTop+event.clientY;// 鼠标起始纵坐标
    select=true;
}

function document.onmouseup()
{
    select=false;
}

function document.onselectstart()
{
    return false;
}

function document.ondrag()
{
    return false;
}

function document.onmousemove()
{
    if (select)
    {
        dd.style.display='';// 如果鼠标已经正确移动,将层设置为可视。
        if(document.body.scrollLeft+event.clientX-x0>0) // 从左向右
        {
            dd.style.left=x0;
            dd.style.width=document.body.scrollLeft+event.clientX-x0;
        }
        else // 从右向左
        {
            dd.style.left=document.body.scrollLeft+event.clientX;
            dd.style.width=x0-(document.body.scrollLeft+event.clientX);
        }
        if (document.body.scrollTop+event.clientY-y0>0)// 从上向下
        {
            dd.style.top=y0;
            dd.style.height=document.body.scrollTop+event.clientY-y0;
        }
        else// 从下向上
        {
            dd.style.top=document.body.scrollTop+event.clientY;
            dd.style.height=y0-(document.body.scrollTop+event.clientY);
        }
    }
}
</script>
</head>

<body>
<table id="dd" style="position:absolute; width:0px; height:0px; z-index:99; border:1px black dashed; display:none;"><tr><td></td></tr></table>
</body>
</html>

你可能感兴趣的:(鼠标选取框)