jQuery实现可拖动进度条实例代码

前端之家收集整理的这篇文章主要介绍了jQuery实现可拖动进度条实例代码前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

html

css

Box-sizing:border-Box;} .progress_btn:hover{border-color:#F7B824;}

js

 

300) { left = 300; } $('.progress_btn').css('left',left); $('.progress_bar').width(left); $('.text').html(parseInt((left/300)*100) + '%'); } }); $('.progress_bg').click(function(e) {//鼠标点击 if (!tag) { bgleft = $('.progress_bg').offset().left; left = e.pageX - bgleft; if (left <= 0) { left = 0; }else if (left > 300) { left = 300; } $('.progress_btn').css('left',left); $('.progress_bar').animate({width:left},300); $('.text').html(parseInt((left/300)*100) + '%'); } }); });

效果

实现原理

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

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

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

以上所述是小编给大家介绍的jQuery实现可拖动进度条demo。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

猜你在找的jQuery相关文章