基于JavaScript实现拖动滑块效果

本文实例为大家分享了js拖动滑块效果的具体代码，供大家参考，具体内容如下

效果：

代码：

 
  
  
  
  
   .lineDiv {
    position: relative;
    height: 5px;
    background: red;
    width: 300px;
    margin: 50px auto;
   }

   .lineDiv .minDiv {
    position: absolute;
    top: -5px;
    left: 0;
    width: 15px;
    height: 15px;
    background: green;
    cursor: pointer
   }

   .lineDiv .minDiv .vals {
    position: absolute;
    font-size: 20px;
    top: -45px;
    left: -10px;
    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;
   }
  
 

 
  
   用鼠标拖动小方块0%
  
  
   
    0
   
  
  
 

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。