原生js封装十字参考线插件(一)
2024-10-19 02:27:41
需求来源:
拓扑图之机房平面图,显示机房长宽比例尺,房间内标注各种设备间距不易实现,特在机房平面图上层加一个十字参考线
横竖两条线垂直,在鼠标指针处交叉,显示鼠标指针坐标(相对机房平面图的坐标,不是相对于浏览器)
在需要时开启,用完关闭
项目用的是vue,并未引入jQuery,所以直接原生js封装的,部分代码用到ES6语法
效果如图:
关闭状态
开启状态
封装后,开放三个参数功能:
开关按钮:开启参考线
父级div:
参考线颜色:color:"#ff0000",默认红色
调用方法
参数一:参考线开关的class,参数二:参考线父级盒子class,参数三:参考线颜色
LineOpen.openLine('btn1',parentBox','blue');
部分代码
<button class="btn1" style="padding:6px 12px;margin:20px;border:0 none;background:yellow;" onclick="LineOpen.openLine('btn1','parentBox','red');">启用参考线</button>
<div class="parentBox" style="width:600px;height:500px;border:1px solid #000;"></div>全部代码见"原生js封装十字参考线插件(二)"
备注:代码有加密,需要源码,请留言,或加微信youling_1989
最新文章
- native vlan(本征VLAN)
- Struts2 的 值栈和ActionContext
- C# Azure 存储-分布式缓存Redis的新建&配置&查看
- 如何关闭windows电脑的开机自启程序
- C# 域用户操作(转)
- MFC设置对话框大小
- 创建MySQL用户 赋予某指定库表的权限 flush privileges才能生效！！！！;@'localhost'授权本地，@'%'授权远程
- Dapper使用方法：dapper-dot-net/Tests/Tests.cs解析(1)方法：TestMultiMapWithConstructor
- struts2+hibernate-jpa+Spring+maven 整合(2)
- 第一个js程序
- Linux命令学习之shift命令
- AngularJS事件
- Linux 一块网卡配置多个IP的方法
- 单点登录SSO：图示和讲解
- algernon 基于golang 的独立的支持redis lua pg。。。 的web server
- pip常用命令、配置pip源
- 【Android】窗口机制分析与UI管理系统
- Django的学习（六）————templates过滤器、Django shell、admin
- twig用法
- Node.js开源应用OSN发布初始V1.0版本-见面版本