鼠标选取框

最新推荐文章于 2023-02-16 07:00:00 发布

stefli

最新推荐文章于 2023-02-16 07:00:00 发布

阅读量1.5k

点赞数

分类专栏：技术文章标签： function javascript border table html

技术专栏收录该内容

23 篇文章 0 订阅

订阅专栏

<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>

stefli

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
鼠标选取框

鼠标选取框 var x0;var y0;var select=false;function document.onmousedown(){ x0=document.body.scrollLeft+event.clientX;// 鼠标起始横坐标 y0=document.body.scrollTop+event.clientY;// 鼠标起始纵坐标 select=true;}
复制链接

扫一扫