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

js 元素大小缩放实例的更多相关文章

js中窗口大小和单个元素大小的计算
1. 窗口的大小即浏览器的大小: window.innerWidth, window.innerHeight, window.outerHeight, window.outerWidth 在IE9+, ...
canvas元素大小与绘图表面大小
原文链接:canvas总结:元素大小与绘图表面大小前言我们使用canvas的时候一般在canvas元素中直接设置它的width和height: 1 <canvas id="myCa ...
JS控制SVG缩放+鼠标控制事件
话不多说,直接上代码吧,不行你砍我... <!DOCTYPE html> <html lang="en"> <head> <meta ch ...
【转】JS大总结(带实例)
JS大总结(带实例) JavaScript事务查询综合click() 对象.click() 使对象被点击.closed 对象.closed 对象窗口是否已封闭true/falseclearTimeou ...
dojo/dom-geometry元素大小
在进入源码分析前,我们先来点基础知识.下面这张图画的是元素的盒式模型,这个没有兼容性问题,有问题的是元素的宽高怎么算.以宽度为例,ff中元素宽度=content宽度,而在ie中元素宽度=conte ...
jquery插件之拖拽改变元素大小
该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的拖拽改变元素大小的效果,您可以根据自己的实际需求来设置被 ...
canvas总结：元素大小与绘图表面大小
前言我们使用canvas的时候一般在canvas元素中直接设置它的width和height: <canvas id="myCanvas" width="300&q ...
【前端】vue.js环境配置以及实例运行简明教程
vue.js环境配置以及实例运行简明教程声明:本文档编写参考如下两篇博客,是对它们的修改与补充,欢迎点击链接查看原文: 原文1:vue.js在windows本地下搭建环境和创建项目原文2:Vue. ...
Javascript高级编程学习笔记（52）—— DOM2和DOM3（4）元素大小
在日常实践中,我们在使用JS的时候难免会需要获取元素的大小及位置首先要声明的是,这一部分的内容并不属于DOM2样式规范,因为DOM中并没有对我们如何获取元素大小的相关信息做出规范偏移量偏移量及元 ...

随机推荐

Akka-CQRS（2）- 安装部署cassandra cluster，ubuntu-16.04.1-LTS and MacOS mojave
对于akka-cluster这样的分布式软件系统来说,选择配套的数据库类型也是比较讲究的,最好也是分布式的,如cassandra,能保证良好的HA特性.前面的例子里示范akka-persistence ...
【mysql注入】mysql注入点的技巧整合利用
[mysql注入]mysql注入点的技巧整合利用本文转自:i春秋社区前言: 渗透测试所遇的情况瞬息万变,以不变应万变无谓是经验与技巧的整合简介: 如下 mysql注入点如果权限较高的话,再知道w ...
【百度杯】ctf夺旗大战，16万元奖励池等你拿
寻找安全圈内最会夺flag的CTF职业玩家,将以个人方式参与夺旗,完全凭借个人在CTF中的技艺及造诣获得奖金回报. 周末少打一局LOL,玩一玩CTF也能挣个万元零花钱! **比赛时间: 9月至17年3 ...
ES6之命令妙用
很多人都听说过ES6(也就是ECMAScript的新一代标准)并且对她充满了向往,下面通过一个ES6中小知识点——let命令,来解开她的神秘面纱,让大家初步认识一下ES6的语法规范. ...
吴恩达机器学习笔记15-假设陈述（Hypothesis Representation）
在分类问题中,要用什么样的函数来表示我们的假设呢?此前说过,希望我们的分类器的输出值在0 和1 之间,因此,我们希望想出一个满足某个性质的假设函数,这个性质是它的预测值要在0 和1 之间.回顾在一开 ...
微信昵称的emoji的尝试性解决方案
概述之前分享过前端页面使用emoji,讨论了前端页面使用emoji的方法,但是微信昵称中的emoji怎么获取和显示呢?我查找了一些资料,把心得记录下来,供以后开发时参考,相信对其他人也有用. 转码问 ...
nginx 日志切割脚本
#!/bin/shLOG_PATH=/home/test/nginx/logsNEW_LOG_PATH=/home/test/nginx/dayslogNGING_PID=$(cat /home/te ...
js控制多层单选，多选按钮，做隐藏操作
项目中遇到多层级单选,多选按钮的置灰/隐藏操作.特意写了一个公用组件: //置灰方式 //controllerArr数组添加如下数据: //{ctrlName:"gds_anquanyuan ...
HBuilder+eclipse开发：使用ajax异步传值生成首字母索引
使用ajax异步传值生成首字母索引大致有以下几个步骤: 1.服务器端使用servlet提取出数据库里的数据; 2.使用首字母工具类对数据进处理得到首字母; 3.再将首字母和数据一一对应存入json数组 ...
转转RN工程化历程
选型RN理由? 目前各大公司技术栈都是native端(android,iOS)以及H5端,然而这两大传统的开发方式都各有优缺点,下面表格简单汇总一下. - native端 web端 RN 开发效率低 ...