javascript - js滑动与进度是怎么写的？

Question

比如摄像头效果
曝光时间
图像亮度50
图像对比度50
图像饱和度50
图像清晰度50
当拿亮度调到51. js这块怎么得知51？

Answer 1

按的是百分比算的吧

Answer 2

用纯JS写的话，通常是在一个p放另一个不同颜色的p，然后改变里面p的大小来达到模拟进度条的效果。

圆点的位置就监听mousedown,mouseover,和mouseup，然后修改小圆点的margin值来模拟移动，然后大小就是margin值和整个p的width的比值。

Answer 3

进度条一般是写两个p套在一起，外面那层是进度条，里面那个是进度条的进度。背景颜色要不一样例如：
<p style="width:200px;height:10px;background:#ddd">

<p style="width:10%;height:10px;background:red"></p>

</p>
而你就只是控制里面p的width就可以的。用animate()实现滑动的效果。

而如果是要像你图那样的话，把里层的p的圆圈写出来，只要给自己的通过相对位置控制里面p的位置就好了。

Answer 4

js监听事件绑定回调函数，用户操作的时候触发回调函数，JS进行计算

Answer 5

滑块不模拟的话,用html input type=range 去实现,直接可以得到数值,模拟的话就用JS位置/总长度去计算

Answer 6

<input type='range' />
demo

Answer 7

一种是通过input range
另外一种是模拟 通过width判断