js 元素大小缩放实例

发布时间:2021-01-07 发布网站:前端之家 F2er.com
前端之家收集整理的这篇文章主要介绍了js 元素大小缩放实例前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

 

 

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

按下鼠标事件

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

拖动鼠标事件

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

 

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

鼠标松开事件

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

 

'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];
        
        // 鼠标按下
        nodese.addEventListener("mousedown",(event) => {
            true;    设置状态位
            [mousedownX,height] = [
                event.clientX, 鼠标按下时X坐标
                event.clientY, 鼠标按下时Y坐标
                Number.parseFloat(this.style.width),1)"> 获取元素宽度
                Number.parseFloat(this.style.height),1)"> 获取 元素高度
            ];
        });

         鼠标拖动        
        document.addEventListener("mousemove",1)">if (.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",1)">false;    重置状态位
        })
    }

    _createSe(className) {
        let node = document.createElement('div');
        node.className = className;
        .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

 

总结


以上是前端之家为你收集整理的js 元素大小缩放实例全部内容,希望文章能够帮你解决js 元素大小缩放实例所遇到的程序开发问题。

如果觉得前端之家网站内容还不错,欢迎将前端之家网站推荐给前端开发程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。