原生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
    
  
  
  
    
      0
    
  
  

感兴趣的朋友可以使用在线HTML/CSS/Javascript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于Javascript相关内容可查看本站专题：《Javascript页面元素操作技巧总结》、《Javascript操作DOM技巧总结》、《Javascript切换特效与技巧总结》、《Javascript动画特效与技巧汇总》、《Javascript错误与调试技巧总结》、《Javascript数据结构与算法技巧总结》及《Javascript数学运算用法总结》

希望本文所述对大家Javascript程序设计有所帮助。