利用Jquery实现可拖动进度条的效果

来源：动视网责编：小采时间：2020-11-27 20:19:14

利用Jquery实现可拖动进度条的效果

利用Jquery实现可拖动进度条的效果:这篇文章主要介绍了jQuery实现可拖动进度条实例代码，非常不错，具有参考借鉴价值,需要的朋友可以参考下html <div class="progress"> <div class="progress_bg"> <div class="

推荐度：

点击下载本文 文档为doc格式

导读利用Jquery实现可拖动进度条的效果:这篇文章主要介绍了jQuery实现可拖动进度条实例代码，非常不错，具有参考借鉴价值,需要的朋友可以参考下html <div class="progress"> <div class="progress_bg"> <div class="

这篇文章主要介绍了jQuery实现可拖动进度条实例代码，非常不错，具有参考借鉴价值,需要的朋友可以参考下

html

　<div class="progress">
 <div class="progress_bg">
 <div class="progress_bar"></div>
 </div>
 <div class="progress_btn"></div>
 <div class="text">0%</div>
</div>

css

.progress{position: relative; width:300px;margin:100px auto;}
.progress_bg{height: 10px; border: 1px solid #ddd; border-radius: 5px; overflow: hidden;background-color:#f2f2f2;}
.progress_bar{background: #5FB878; width: 0; height: 10px; border-radius: 5px;}
.progress_btn{width: 20px; height: 20px; border-radius: 5px; position: absolute;background:#fff; 
left: 0px; margin-left: -10px; top:-5px; cursor: pointer;border:1px #ddd solid;box-sizing:border-box;}
.progress_btn:hover{border-color:#F7B824;}

　　　$(function(){
 var tag = false,ox = 0,left = 0,bgleft = 0;
 $('.progress_btn').mousedown(function(e) {
 ox = e.pageX - left;
 tag = true;
 });
 $(document).mouseup(function() {
 tag = false;
 });
 $('.progress').mousemove(function(e) {//鼠标移动
 if (tag) {
 left = e.pageX - ox;
 if (left <= 0) {
 left = 0;
 }else if (left > 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) + '%');
 }
 });
 });

效果图