99热在线精品一区二区三区_国产伦精品一区二区三区女破破_亚洲一区二区三区无码_精品国产欧美日韩另类一区

小編給大家分享一下原生js怎么實現的移動端可拖動進度條插件功能，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創(chuàng)新互聯：自2013年創(chuàng)立以來為各行業(yè)開拓出企業(yè)自己的“網站建設”服務，為上千家公司企業(yè)提供了專業(yè)的成都網站建設、成都做網站、網頁設計和網站推廣服務， 按需網站策劃由設計師親自精心設計，設計的效果完全按照客戶的要求，并適當的提出合理的建議，擁有的視覺效果，策劃師分析客戶的同行競爭對手，根據客戶的實際情況給出合理的網站構架，制作客戶同行業(yè)具有領先地位的。

具體如下：

該插件最初的想法來自網上的一篇文章，直達鏈接：//www.jb51.net/article/167717.htm

筆者因為業(yè)務需要尋找到這個插件，然后拿來用之，發(fā)現各種不方便，然后便開始了改造之路。

上代碼：

html和css部分沒有改動，而js改動還是很大的，比較原來作者的文章，改動點如下

1）整體上，原來不是插件，改造之后成為一個可以復用的插件，雖然簡單了點

2）只是將其改造為適用于移動端的插件

3）通過對開始滑動和結束滑動比例的處理，優(yōu)化了開始滑動和結束滑動的體驗

4）移動端加了防止長按彈出提示框的代碼

5）小滑塊的寬度改為動態(tài)

改造之后的整體案例，需要指出：筆者主要用在微信端，至于其他瀏覽器滑塊的體驗不是很好，還有滑塊滑動體驗跟小塊的尺寸有直接關系。

  
  
  
  
  .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