Rumah > hujung hadapan web > Tutorial H5 > 左右滑动条原理。?

左右滑动条原理。?

WBOY
Lepaskan: 2016-06-07 08:44:03
asal
1490 orang telah melayarinya

我知道用音频元素的volume属性控制音量,我也知道实现的音量左右滑动条的基本思路是一个总音量条的父元素,一个显示当前音量条的子元素和一个显示圆点的子元素,利用mousedown和mousemove改变这两个元素的left属性和width属性,但是如何控制左0到右100,如何鼠标离开父元素区域后还能左右滑动,毫无思路,网上查了很久也没有多少介绍这种原理的。

回复内容:

一般对于拖动类的控件来说,要考虑基本的可用性,也就是说拖动操作时鼠标指针移出控件范围后这个拖动操作还不能断。

那么常见的做法就是在控件上绑定 mousedown ,事件触发之后在 document 上绑定 mousemove 和 mouseup ,在 mouseup 触发之后去掉上述两个监听器。

可能的话还应当考虑键盘操作的可用性。 圆点离开父元素还能滑动的是因为你没设定范围。在圆点滑动时要判断left是否在父元素范围内,离开范围马上清除绑定,不能只在鼠标mouseup时清除。
Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan