实现思路1
需积分: 0 23 浏览量
2022-08-08
23:23:21
上传
评论
收藏 70KB DOCX 举报
拖动水平条
用到的知识点包括了 offset 家族和 event 属性 clientX；
布局思路：一个大盒子里面包含着两个小盒子，分别是用来动态显示宽度（mask）和用做
拖动手柄（bar）。两个小盒子都用绝对定位方式设置位置。
Js 实现思路：当拖动事件是当鼠标先按下 onmousedown 然后在注意是在文档范围内移动时
document.onmousemove 触发的，这里就是当手柄被按下并且鼠标移动时会触发拖动事件。
首先实现 bar 的拖动，拖动时 bar 的 left 的值会发生改变，这个值
拖动时 mask 的宽度可以由 bar.offsetLeft - bar.parentNode.offsetLeft 值得到。
当第一次拖动时，bar 的 left 值等于 event.clientX - bar.parentNode.offsetLeft
当在任意一点开始拖动时 left 值还是等于 event.clientX - bar.parentNode.offsetLeft
当 onmouseup 的时候，bar 不能继续跟随鼠标移动，而是停留在鼠标弹起的位置。
把 document.onmousemove = null，需要注意的是这里应该是 document.onmouseup 因为用户
在移动 bar 的时候鼠标不可避免的会超出 bar 的范围，所以应该是在文档上只要鼠标弹起后
鼠标再移动就没有作用了。
控制 bar 移动的范围不能超出最大的盒子。
实现 mask 的宽度等于 bar 的 left 值。
最后实现百分比的显示 百分比值等于 bar 的 left 值 / （大盒子的总宽度 - bar 的宽度）
Scroll 家族
ScrollTop / scrollLeft
评论0