复制代码代码如下： html脚本类型=' text/JavaScript ' src=' http : jquery。js '/脚本样式。d _ b { height : 20px宽度： 10px显示器：内联块；背景-颜色：黑色；相对位置：垂直对齐： 中间；top :-15px；左侧：-5px；}/style div id=' d ' style=' width :200 px；光标：指针；'max=100min=0值=10 div style=' height :10 px宽度：100%;背景色：绿色'/div b class=' d _ b '/div b id=' text '脚本var $ DOM=$(文档)；$dom.on('mousedown '，' #d '，函数（参数){ $(这个).数据('鼠标','向下');控制台。日志(' down ')；})$dom.on('mouseup '，function(){ $('#d ').数据('鼠标','向上');控制台。登录(' up ')；});$dom.on('mousemove '，' #d '，函数（事件){ if($(this).数据('鼠标')=='向下'){ var m _ x=事件。客户x；var d_b=$(这个).查找('。d _ b '；^ 8？8 :m _ x；m_x=m_x 208？208:m _ x；d_b.css('左，m _ x-13)；var max=$(这个)。attr(' max ')；$(这个)。attr('值'，数学。地板((m _ x-8)/200 *最大值))控制台。日志($(本).attr(' value ')；$('#text ').文本($(这个).attr(' value '))} })；/script/html

效果图：

以上就是本文的全部内容了，希望能够对大家学习使用jQuery有所帮助。