左右滑动条原理。?
程序员文章站
2024-01-08 19:40:04
...
我知道用音频元素的volume属性控制音量,我也知道实现的音量左右滑动条的基本思路是一个总音量条的父元素,一个显示当前音量条的子元素和一个显示圆点的子元素,利用mousedown和mousemove改变这两个元素的left属性和width属性,但是如何控制左0到右100,如何鼠标离开父元素区域后还能左右滑动,毫无思路,网上查了很久也没有多少介绍这种原理的。
那么常见的做法就是在控件上绑定 mousedown ,事件触发之后在 document 上绑定 mousemove 和 mouseup ,在 mouseup 触发之后去掉上述两个监听器。
可能的话还应当考虑键盘操作的可用性。 圆点离开父元素还能滑动的是因为你没设定范围。在圆点滑动时要判断left是否在父元素范围内,离开范围马上清除绑定,不能只在鼠标mouseup时清除。
回复内容:
一般对于拖动类的控件来说,要考虑基本的可用性,也就是说拖动操作时鼠标指针移出控件范围后这个拖动操作还不能断。那么常见的做法就是在控件上绑定 mousedown ,事件触发之后在 document 上绑定 mousemove 和 mouseup ,在 mouseup 触发之后去掉上述两个监听器。
可能的话还应当考虑键盘操作的可用性。 圆点离开父元素还能滑动的是因为你没设定范围。在圆点滑动时要判断left是否在父元素范围内,离开范围马上清除绑定,不能只在鼠标mouseup时清除。
推荐阅读
-
左右滑动条原理。?
-
约 1亿条记录, 每条1k左右,key =>value形式,用于前台查询,选择什么作为存储方案比较合适呢,要求效率比较高并且相对稳定可靠?
-
微信小程序实现卡片左右滑动效果的示例代码
-
html5页面在手机上手指左右滑动_html/css_WEB-ITnose
-
Jquery左右滑动插件之实现超级炫酷动画效果附源码下载_jquery
-
Android仿IOS ViewPager滑动进度条
-
js实现文字左右滑动的代码
-
Android编程实现左右滑动切换背景的方法
-
Android HorizontalScrollView左右滑动效果
-
Android 使用ViewPager实现左右循环滑动及轮播效果