1. 程式人生 > >原生js模擬框選選擇效果

原生js模擬框選選擇效果

在這裡插入圖片描述

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