HTML+CSS+JS实现拖动进度条以及点击进度增加的功能

最新推荐文章于 2024-06-09 09:49:42 发布

LynnWonderLu

最新推荐文章于 2024-06-09 09:49:42 发布

阅读量9k

点赞数 1

分类专栏： webFE 文章标签：前端 HTML JS CSS

本文链接：https://blog.csdn.net/lynnwonder6/article/details/79934359

版权

webFE 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

HTML：

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

JS：

$(document).ready(function(){
 var tag = false,dx = 0,left = 0,bgleft = 0;
 $('.progress_btn').mousedown(function(e) {
  dx = e.pageX - left;
  tag = true;
 });
 $(document).mouseup(function(e) {
  tag = false;
 });
 $('.progress_btn').mousemove(function(e) {//鼠标移动
  if (tag) {
   left = e.pageX - dx;
   if (left <= 0) {
    left = 0;
   }else if (left > 300) {
    left = 300;
   }
   $('.progress_btn').css('left', left);
   $('.progress_bar').animate({width:left},1);
   $('.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) + '%');
  }
//  alert(left);
 });

});

CSS：

.progress{position: absolute; width:300px;margin:100px auto;}
.progress_bg{height: 10px;width:300px; border: 1px solid #ddd; border-radius: 5px;overflow: hidden;background-color:#f2f2f2;}/**/
.progress_bar{ width: 0; height: 10px; border-radius: 5px;background: #5FB878;position: absolute; top:1px;}/* position: absolute;*/
.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;}