当前位置： 移动技术网 > IT编程>开发语言>JavaScript > js 元素大小缩放实例

js 元素大小缩放实例

2019年01月26日  | 移动技术网IT编程  | 我要评论

 

 

元素大小缩放是一套连贯事件，按下鼠标不放，拖动鼠标 然后松开。

按下鼠标事件

当按下鼠标时，记录元素大小、鼠标按下的位置、状态位。

拖动鼠标事件

当鼠标拖动时，计算元素调用后的大小。

 

元素调整后大小 =  初始元素大小 + （鼠标移动位置 - 鼠标按下位置）

鼠标松开事件

当调整完成后，鼠标松开这时重置状态位，防止移动鼠标时触发移动事件。

 

'use strict';

class divelement {

    /**
     * 构造函数
     * @param {object} option 
     * @param {htmlelement} option.element
     * @param {number} option.minwidth
     * @param {number} option.minheight
     */
    constructor({ element, minwidth, minheight }) {
        this.element = element;
        this.minheight = minheight;
        this.minwidth = minwidth;
        this.state = false;
    }


    /**
     * @returns {cssstyledeclaration}
     */
    get style() {
        return window.getcomputedstyle(this.element);
    }

    /**
     * 调整大小
     */
    resizable() {        
        let nodese = this._createse('resizable-se');
        let [mousedownx, mousedowny, width, height] = [0, 0, 0, 0];
        
        // 鼠标按下
        nodese.addeventlistener("mousedown", (event) => {
            this.state = true;   // 设置状态位
            [mousedownx, mousedowny, width, height] = [
                event.clientx,   // 鼠标按下时x坐标
                event.clienty,   // 鼠标按下时y坐标
                number.parsefloat(this.style.width),  // 获取元素宽度
                number.parsefloat(this.style.height),  // 获取 元素高度
            ];
        });

        // 鼠标拖动        
        document.addeventlistener("mousemove", (event) => {
            if (this.state) {
                let w = width + (event.clientx - mousedownx);   // 调整后的宽度
                let h = height + (event.clienty - mousedowny);  // 调整后的高度
                if (w > this.minwidth) {              // 限制最小 宽度
                    this.element.style.width = w + 'px';
                }
                if (h > this.minheight) {   // 限制最小 高度
                    this.element.style.height = h + 'px';
                }
            }
        })

        // 鼠标松开
        this.element.addeventlistener("mouseup", (event) => {
            this.state = false;   // 重置状态位
        })
    }

    _createse(classname) {
        let node = document.createelement('div');
        node.classname = classname;
        this.element.appendchild(node);
        return node;
    }
}

 

<!doctype html>

<head>
    <meta charset="utf8">
    <title>缩放</title>
    <script src="divelement.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
    <div class="resizable">
        <h2>右下角</h2>
    </div>

    <script>
        'use strict';
        let o = new divelement({
            element: document.queryselector('.resizable'),
            minwidth: 140,
            minheight: 140
        });
        o.resizable();
        
    </script>
</body>


</html>

 

 

.resizable {
    border: 1px #ccc solid;
    float: left;
    height: 200px;
    width: 200px;
    padding: 40px;
    position: relative;
}

.resizable-se {
    cursor: se-resize;
    width: 12px;
    height: 12px;
    right: 1px;
    bottom: 1px;
    background: url("ui-icons.png") no-repeat;
    position: absolute;
}

 

样本：http://js.zhuamimi.cn/%e5%85%83%e7%b4%a0%e5%a4%a7%e5%b0%8f%e8%b0%83%e6%95%b4/

源码：https://pan.baidu.com/s/1f4n0nk6qzfnqokmswf7keg

我的百度经验：https://jingyan.baidu.com/article/1876c85223513b890b1376f5.html

 

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网