原生js模拟框选选择效果

最新推荐文章于 2023-07-24 18:59:06 发布

#麻辣小龙虾#

最新推荐文章于 2023-07-24 18:59:06 发布

阅读量910

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/CodingNoob/article/details/83120229

版权

javascript 专栏收录该内容

89 篇文章 1 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>原生js模拟框选选择效果</title>
    <style>
        *{margin:0;padding:0;}
        body{
            position:absolute;
            height:100%;
            width:100%;
            background:#ccc;
        }
        #box{
            position:absolute;
            background:blue;
            opacity: 0.3;
            border:2px solid #fff;
        }
    </style>
</head>
<body>
    
</body>
<script>
    var pageX = null;
    var pageY = null;
    var left = null;
    var top = null;
    var body = document.body;
    var isDown = false;
    function $(select){
        return document.querySelector(select)
    }
    body.onmousedown = function () {
        isDown = true;
        let box = document.createElement('DIV');
        let e = event || window.event;
        pageX  = e.pageX;
        left = e.pageX;
        pageY = e.pageY;
        top = e.pageY;
        box.id = 'box';
        box.style.display = 'none';
        box.style.left = pageX + 'px';
        box.style.top = pageY + 'px';
        body.appendChild(box);
    };
    body.onmousemove = function (e) {
        if (isDown) {
            let pagex = event.pageX;
            let pagey = event.pageY;
            let width = pagex - pageX;
            let height = pagey - pageY;
            if (width > 0) {
                $('#box').style.display = 'block';
                $('#box').style.width = width + 'px';
                $('#box').style.height = height + 'px';
            } else {
                $('#box').style.display = 'block';
                $('#box').style.top = pagey + 'px';
                $('#box').style.left = pagex + 'px';
                $('#box').style.width = (-width) + 'px';
                $('#box').style.height = (-height) + 'px';
            }
        }
    };
    body.onmouseup = function (e) {
        let box = $('#box');
        left = 0;
        top = 0;
        pageX = 0;
        pageY = 0;
        isDown = false;
        body.removeChild(box);
    };

</script>
</html>

#麻辣小龙虾#

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生js模拟框选选择效果

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
复制链接

扫一扫