JS实现悬浮画板思路

本文介绍了如何使用JavaScript实现一个类似窗口界面的功能,允许用户通过鼠标选择一个区域,选中的表格单元格(td)会变色。内容涉及到兼容谷歌、IE11和IE8的解决方案,包括遮罩层的创建、坐标计算、页面滚动和窗口尺寸变化的处理,以及虚线框的生成和选中td的逻辑。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1)情况:最近写了一个类似window界面,鼠标左击按下(不放开),然后移动,会出现一个方框的效果(如图一),然后选中虚线框中的td(其实就是td颜色改变),这里的内容,看似简单,但是对于一个我这个前端菜鸡的后端来说,简直就是噩梦,因为需要兼容谷歌,IE11和IE8。。。,好了,实际效果图(如图二,由于系统太旧,前端界面比较丑,不用在意,看思路就好)

2)实现效果:

图一:

 

图二:(虚线框,画框)

图三(框选中多个td,并且让其高亮显示,然后将选择的面板显示出来)

图四(点击选中单个td,并让其高亮显示,然后将选择的面板显示出来)

 

3)思路描述:

3.1)其实这里之所以可以操作,关键点在于,可操作的td之上,覆盖了一层遮罩层画板div(如图五);

图五:(这个可以通过设置div颜色,在调试其位置时比较直观,而实际使用时,即通过透明度来使其隐藏起来,就像一个透明的遮罩层,然后我们通过绑定鼠标点击、鼠标移动、鼠标松开事件,实现具体的逻辑)

3.2)遮罩层位置和大小的设置

情况1:数据比较少(即,不会出现页面滚动效果的页面,相对直观简单,如图六),这图的条件是,A、B、C三点坐标都是正数,那么如图,宽高都可以通过三点坐标计算出来;而各点坐标,

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值