简单的代码实现拖拽拉伸尺寸

很甜的西瓜
已于 2022-09-29 00:37:29 修改
阅读量678
点赞数
分类专栏：前端 JS 文章标签： javascript html5 resize
于 2022-03-14 16:02:49 首次发布
本文链接：https://blog.csdn.net/long5305350/article/details/123480716
版权
JS 同时被 2 个专栏收录
41 篇文章 0 订阅
订阅专栏
前端
36 篇文章 0 订阅
订阅专栏
代码：
效果:
代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .btn {
            border: solid 2px #000;
            background-color: rgba(196, 193, 193, 0.6);
            padding: 4px;
            border-radius: 5px;

        }

        .btn>.btn-body {
            background: linear-gradient(to bottom, rgb(196, 193, 193) 0%, rgb(233, 232, 232) 50%, rgb(196, 193, 193) 100%);
            border-radius: 5px;
            padding: 10px;
            border: solid 1px #b3b1b1;
            display: flex;
            align-items: center;
        }

        .btn>.btn-body>.text {
            font-size: 18px;
            font-weight: bold;
            margin-left: 5px;
            margin-right: 5px;

        }

        .star {
            position: relative;
            content: '';
            display: block;
            width: 0;
            height: 0;
            position: relative;
            display: block;
            border: solid 5px transparent;
            border-left-width: 10px;
            border-right-width: 10px;
            border-top-color: #646363;
            margin-top: 2px;

        }

        .star::before {
            content: '';
            display: block;
            position: absolute;
            width: 0;
            height: 0;
            border: solid 4px transparent;
            border-left-width: 8px;
            border-right-width: 8px;
            border-top-color: #646363;
            transform: translate(-50%, -50%) rotate(60deg);

        }

        .star::after {
            content: '';
            display: block;
            position: absolute;
            width: 0;
            height: 0;
            border: solid 4px transparent;
            border-left-width: 8px;
            border-right-width: 8px;
            border-top-color: #646363;
            transform: translate(-50%, -50%) rotate(-60deg);

        }

        .demo2 {
            margin: 100px auto;
            width: 80vw;
            height: 50vh;
            background-color: #ddd;
        }

        .box {
            border: solid 1 #000;
            height: 100px;
            width: 100px;
            position: absolute;
            border: solid 1px #000;
            box-sizing: border-box;
        }

        .box>i {
            position: absolute;
            border: solid 1px #000;
            height: 10px;
            width: 10px;
            transform: translate(-50%, -50%);
            background-color: transparent;
        }

        .tl {

            top: 0;
            left: 0;
            cursor: se-resize;
        }

        .tm {
            top: 0;
            left: 50%;
            cursor: n-resize;
        }

        .tr {

            top: 0;
            left: 100%;
            cursor: sw-resize;
        }

        .bl {

            top: 100%;
            left: 0;
            cursor: ne-resize;
        }

        .bm {
            top: 100%;
            left: 50%;
            cursor: s-resize;
        }

        .br {
            top: 100%;
            left: 100%;
            cursor: nw-resize;
        }

        .lm {
            top: 50%;
            left: 0%;
            cursor: e-resize;
        }

        .rm {
            top: 50%;
            left: 100%;
            cursor: ew-resize;
        }
    </style>
</head>

<body>
    <!--机试题1-->
    <div class="demo">
        <!--btn-->
        <button class="btn">
            <div class="btn-body">
                <span class="star"></span>
                <span class="text">CHCECKOUT</span>
                <span class="star"></span>
            </div>
        </button>
        <!--btn-----end-->
    </div>
    <!--机试题1----------end-->
    <!--机试题2-->
    <div class="demo2">
        <div class="box">
            <i class="tl"></i>
            <i class="tm"></i>
            <i class="tr"></i>
            <i class="bl"></i>
            <i class="bm"></i>
            <i class="br"></i>
            <i class="lm"></i>
            <i class="rm"></i>
        </div>
    </div>
    <!--机试题2----------end-->
    <script>
        function Box(el) {
            this.el = el
            let that = this
            let dirs = {
                tl: { ox: 1, oy: 1, x: -1, y: -1 },
                tm: { ox: 0.5, oy: 1, x: 0, y: -1 },
                tr: { ox: 0, oy: 1, x: 1, y: -1 },
                bl: { ox: 1, oy: 0, x: -1, y: 1 },
                bm: { ox: 0.5, oy: 0, x: 0, y: 1 },
                br: { ox: 0, oy: 0, x: 1, y: 1 },
                lm: { ox: 1, oy: 0.5, x: -1, y: 0 },
                rm: { ox: 0, oy: 0.5, x: 1, y: 0 },
            }
            let startX = null, startY = null, left = 0, top = 0, w = 0, h = 0
            let action = '', _w, _h, _l, _t, ox, oy, curDir
            function move(e) {
                if (startX == null) {
                    startX = e.pageX
                    startY = e.pageY
                    return
                }
                let offsetX = e.pageX - startX
                let offsetY = e.pageY - startY
                if (action == 'resize') {
                    let sx = 1 + curDir.x * offsetX / w
                    let sy = 1 + curDir.y * offsetY / h
                    sx=Math.max(0,sx)
                    sy=Math.max(0,sy)
                    ox = curDir.ox * w + left
                    oy = curDir.oy * h + top
                    ox -= ox * sx
                    oy -= oy * sy
                    let px = sx * left + ox
                    let py = sy * top + oy
                    let px2 = sx * (left + w) + ox
                    let py2 = sy * (top + h) + oy

                    _w = px2 - px
                    _h = py2 - py
                    _l = px
                    _t = py
                    that.el.style.width = _w + 'px'
                    that.el.style.height = _h + 'px'
                    that.el.style.left = _l + 'px'
                    that.el.style.top = _t + 'px'
                } else {
                    that.el.style.left = (offsetX + left) + 'px'
                    that.el.style.top = (offsetY + top) + 'px'
                }
            }
            function up(e) {
                startX = null
                startY = null
                document.body.style.cursor = ''
                document.removeEventListener('mousemove', move, false)
                document.removeEventListener('mouseup', up, false)
            }
            this.el.addEventListener('mousedown', (e) => {
                e.preventDefault();
                let rect = that.el.getBoundingClientRect()
                left = rect.left
                top = rect.top
                w = rect.width
                h = rect.height
                let target = e.target
                if (target.nodeType == 1 && target.closest('i')) {
                    action = 'resize'
                    document.body.style.cursor = window.getComputedStyle(target).cursor
                    curDir = dirs[target.className]
                } else {
                    action = 'move'
                    document.body.style.cursor = 'move'
                }
                document.addEventListener('mousemove', move, false)
                document.addEventListener('mouseup', up, false)
            })
        }
        new Box(document.querySelector('.box'))




    </script>

</body>

</html>