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中并没有对我们如何获取元素大小的相关信息做出规范 偏移量 偏移量及元 ...
随机推荐
- Java核心技术卷一基础知识-第14章-多线程-读书笔记
第 14 章 多线程 本章内容: * 什么是线程 * 中断线程 * 线程状态 * 线程属性 * 同步 * 阻塞队列 * 线程安全的集合 * Collable与Future * 执行器 * 同步器 * ...
- 微信APP支付，支付宝APP支付demo
最近公司新开发的APP中,需要集成微信支付和支付宝支付,2个平台申请的都是APP支付.这是个人第一次单独的,完整的做完2个平台的支付. 这里我主要用到了2个接口:支付接口,订单查询接口,虽然2个平台的 ...
- Oracle SQL优化器简介
目录 一.Oracle的优化器 1.1 优化器简介 1.2 SQL执行过程 二.优化器优化方式 2.1 优化器的优化方式 2.2 基于规则的优化器 2.3 基于成本的优化器 三.优化器优化模式 3.1 ...
- ubuntu 16.04 下安装动态链接库方法
一般先使用ldd 来查看该应用程序缺少什么东西,然后,再根据sudo apt install XXX 去安装相应的动态库. 假如没有对应的库,可以使用: sudo ln -s /usr/lib/lib ...
- Python - 安装并配置Anaconda环境
1- 简介 官网:https://www.anaconda.com/ Anaconda是一个用于科学计算的Python发行版,适用于数据分析的Python工具,也可以用在大数据和人工智能领域. 支持 ...
- Docker安装配置MongoDB并使用Robo 3T在局域网连接
主要参考了这位老兄的文章(传送门),写的还是比较详细的. 不废话直接来正经的. 1.docker pull mongo 从docker hub拉取最新的mongo镜像文件,300多M大小. 2.doc ...
- Ubuntu 18.04基本配置
允许WinSCP使用root连接 默认是不允许的,具体方法出自这里(传送门),修改ssh配置,在/etc/ssh下,修改sshd_config文件 PermitRootLogin yes 即可.默认不 ...
- [原创]K8Cscan插件之Weblogic漏洞扫描&通用GetShell Exploit
[原创]K8 Cscan 大型内网渗透自定义扫描器 https://www.cnblogs.com/k8gege/p/10519321.html Cscan简介:何为自定义扫描器?其实也是插件化,但C ...
- CSS box-sizing属性
全文摘抄自 https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-sizing 专门抄一遍是因为,我想当然的以为标准盒子模型设置的宽高是包括padd ...
- 解决svn图标不显示(绝对有用)
经常遇到svn图标不显示的问题,然后经过长时间的查找终于找到了一个最最管用的办法,在这里分享给的大家