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中并没有对我们如何获取元素大小的相关信息做出规范 偏移量 偏移量及元 ...
随机推荐
- web安全学习规划指南
课程信息 难易程度:中级 学习人数:5078人 已完结:共1节 时长:14分钟 课程介绍 黑客进攻真的会像电影里一样敲几行命令屏幕闪动过后就可以控制目标服务器的么?其实大部分时间黑客是在寻找网站应用的 ...
- HBase体系架构和集群安装
大家好,今天分享的是HBase体系架构和HBase集群安装.承接上两篇文章<HBase简介>和<HBase数据模型>,点击回顾这2篇文章,有助于更好地理解本文. 一.HBase ...
- ADB驱动
Windows 7 64位下使用ADB驱动 什么是ADB? adb的全称为Android Debug Bridge,就是起到调试桥的作用.通过adb我们可以在Eclipse中方面通过DDMS来调试An ...
- 你不知道的JavaScript --- 作用域相关
本篇是<你不知道的JavaScript>的读书笔记 什么是作用域? 程序离不变量,那么变量存储在哪里?程序需要时如何找到他们? 这些问题说明需要一套设计良好的规则来存储变量, 并且之后可以 ...
- 自动测试工具(Jmeter,qtp等)
loadrunner.Selenium.QTP三者区别? Loadrunner是商业性能测试工具,收费,功能强大,适合做复杂场景的性能测试. Selenium是开源的web自动测试工具,免费 ...
- 腾讯qq发邮件
<本人新手> 首先要添加引用
- linux命令-awk入门
最近经常查看nginx日志,有时候需要做一些统计分析,于是就想起了awk,学习了就顺便做一个记录. 目录 概述:简单介绍awk背景原理 基本用法:常用到的awk语法 内建变量 综合实例 概述 awk是 ...
- 【原创】ucos信号量的操作及原理
信号量的操作及原理 1.OSSemCreate创建信号量semaphore 在使用信号量之前,要先用OSSemCreate创建一个信号量,并通过返回的合法事件结构体指针使用信号量. OS_ ...
- Ubuntu环境下mysql常见的操作
1 启动mysql服务:Service mysql start 再次启动:service mysql restart 停止mysql服务:service mysql stop 确定mysql是否 ...
- #19 re&jieba模块
前言 在Python中,需要对字符串进行大量的操作,有时需要从一个字符串中提取到特定的信息,用切片肯定是不行的,所有这一节记录两个强大的文本处理模块,一个是正则表达式re模块,另一个是中文处理模块ji ...