实现拖拽进度条

最新推荐文章于 2024-05-09 11:33:03 发布

我家小宝_朱朱

最新推荐文章于 2024-05-09 11:33:03 发布

阅读量3.3k

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/zhuchunyan_aijia/article/details/52295331

版权

js 专栏收录该内容

46 篇文章 1 订阅

订阅专栏

用到了拖拽功能

<style>
        .wrap{
            width:500px;
            border: 1px solid;
            padding: 20px;
        }

        .process{
            position: relative;
            width:80%;
            height: 30px;
            background-color: #dddddd;
            border-radius: 2px;
        }
        .process-bar{
            width: 0%;
            height: 30px;
            background-color: #187aab;
            border-radius: 2px;
        }
        .bar{
            top: -5px;
            left: -5px;
            position: absolute;
            width: 10px;
            height: 40px;
            border-radius: 2px;
            background-color: #91cdea;
            display: inline-block;
        }
    </style>
</head>
<body>
<div class="wrap">
    <div class="process">
        <div class="process-bar"></div>
        <span class="bar" id="mybar"></span>
    </div>
</div>
<script src="../js/libs/jquery-1.11.3.min.js"></script>
<script>
  var isDrag = false;
  var fullwidth = $(".process").width();
  var mouseX,left;
  $("#mybar").bind("mousedown", function (e) {
      isDrag = true;
      mouseX = e.clientX;
      left = $(this).position().left;
      console.log(mouseX+" "+left);
      return false;
  });

    $(document).bind("mousemove", function (e) {
        if(isDrag){
            var mX = e.clientX;
            var l = mX-mouseX+left;
            console.log(mX+" "+l);
            if(l<-5){
                l=-5;
            }else if(l>fullwidth-5){
                l=fullwidth-5;
            }
            $("#mybar").css('left',l);
            var p = Math.round((l+5)*100/fullwidth);
            $(".process-bar").css('width',p+'%');
        }
    });
    $(document).bind("mouseup", function () {
        isDrag = false;
        return false;
    })

    //点击 到点击处 
$(".process").click(function (e) {
    if(!isDrag){
        var eX = e.clientX;
        var l = $("#mybar").offset().left;
        var l1 = $("#mybar").position().left;
        var ox = eX-l;
        var w = $(".process-bar").width();
        var p = (w+ox)*100/fullwidth;
        $(".process-bar").css('width',p+'%');
        $("#mybar").css('left',l1+ox);
        console.log(eX+" "+l+" "+w+" "+p);
    }

})
</script>

效果

我家小宝_朱朱

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
实现拖拽进度条

用到了拖拽功能style> .wrap{ width:500px; border: 1px solid; padding: 20px; } .process{ position: relative; width:80%;
复制链接

扫一扫