超文本标记语言

div class=' progress ' div class=' progress _ BG ' div class=' progress _ bar '/div/div class=' progress _ BTN '/div div class=' text ' 0%/div/div CSS。进度{位置：相对；宽度width :300 pxmargin :100 px auto }。progress _ BG { height : 10pxborder : 1px固体# dddb order-radius : 5px；飞越：隐藏；背景-color : # F2 f 2；} .进度条{ background: # 5FB878宽度： 0;高度： 5px边框-半径： 5px} .progress _ BTN { width : 20px heart : 20pxborder-radius : 5px；绝对位置：背景# fffleft: 0px边距-左侧：-10px；top :-5px；光标：指针；border:1px #ddd固体；盒子大小：边框盒子；} .progress _ BTN :悬停{边框-颜色： # F7b 824}js

$(function(){ var tag=false，ox=0，left=0，bgleft=0；$('.进步_ BTN ' .鼠标向下(函数(e){ ox=e . PageX-左侧；标记=true })；$(文档)。鼠标上移(function(){ tag=false；});$('.进步")。鼠标移动(函数(e) {//鼠标移动if(tag){ left=e . PageX-ox；if(left=0){ left=0；} else if(left 300){ left=300；} $('.进步_ BTN ' .css('left '，left)；$('.进度条(')。宽度（左);$('.文本')。html(parseInt((左/300)* 100)' % ');} });$('.progress _ BG’).点击（函数(e) {//鼠标点击if(！标记){ bgleft=$(' .progress _ BG’).偏移量()。向左；left=e . PageX-bgleft；if(left=0){ left=0；} else if(left 300){ left=300；} $('.进步_ BTN ' .css('left '，left)；$('.进度条(')。动画({width:left}，300)；$('.文本')。html(parseInt((左/300)* 100)' % ');} });});效果图

实现原理

首先是用mousedown()鼠标按下事件保存一个状态值，mouseup()鼠标抬起事件取消该状态，再同时配合mousemove()鼠标移动事件，实现按住拖动的效果。

在鼠标移动的同时去改变精度条的长度和按钮的相对左部的距离。

然后就是距离的计算，主要利用的就是pageX()属性pageX。是鼠标指针相对于文档的左边缘的位置。在鼠标按下是就记录相对位置，在鼠标移动后就可求出鼠标移动的距离。从而改变按钮位置和进度条长度。

以上所述是小编给大家介绍的jQuery实现可拖动进度条演示，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！