原生js怎么实现的移动端可拖动进度条插件功能-创新互联

小编给大家分享一下原生js怎么实现的移动端可拖动进度条插件功能，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

具体如下：

该插件最初的想法来自网上的一篇文章，直达链接：//www.jb51.net/article/167717.htm

笔者因为业务需要寻找到这个插件，然后拿来用之，发现各种不方便，然后便开始了改造之路。

上代码：

html和css部分没有改动，而js改动还是很大的，比较原来作者的文章，改动点如下

1）整体上，原来不是插件，改造之后成为一个可以复用的插件，虽然简单了点

2）只是将其改造为适用于移动端的插件

3）通过对开始滑动和结束滑动比例的处理，优化了开始滑动和结束滑动的体验

4）移动端加了防止长按弹出提示框的代码

5）小滑块的宽度改为动态

改造之后的整体案例，需要指出：笔者主要用在微信端，至于其他浏览器滑块的体验不是很好，还有滑块滑动体验跟小块的尺寸有直接关系。

  
  
  
  
  .lineDiv {
    position: relative;
    height: 5px;
    background: red;
    width: 300px;
    margin: 50px auto;
  }
  .lineDiv .minDiv {
    position: absolute;
    top: -12.5px;
    left: 0;
    width: 30px;
    height: 30px;
    background: green;
    cursor: pointer
  }
  .lineDiv .minDiv .vals {
    position: absolute;
    font-size: 20px;
    top: -45px;
    left: -2.5px;
    width: 35px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    background: blue;
  }
  .lineDiv .minDiv .vals:after {
    content: "";
    width: 0px;
    height: 0px;
    border-top: 6px solid blue;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid transparent;
    display: block;
    margin-left: 11px;
  }
  * {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  


  
    
用鼠标拖动小方块0%
  
  
    
      0