1. <!DOCTYPE html>
    2. <html>
    3.     <head>
    4.         <meta charset="UTF-8">
    5.         <title>document</title>
    6.         <style>
    7.             .kuang {
    8.                 width: 700px;
    9.                 height: 7px;
    10.                 /* background: #c03; */
    11.                 border: 1px solid #000;
    12.                 position: relative;
    13.                 border-radius: 7px;
    14.                 /* margin-left: 30%; */
    15.                 /* margin-top: 20%; */
    16.                 box-sizing: border-box;
    17.                 /*overflow: hidden;*/
    18.             }
    19.             .overflow {
    20.                 overflow: hidden;
    21.                 width: 700px;
    22.                 height: 7px;
    23.                 border-radius: 7px;;
    24.                 position: absolute;
    25.                 left: -1px;
    26.                 top: -1px;
    27.             }
    28.             .bg {
    29.                 position: absolute;
    30.                 background-color: pink;
    31.                 /* border-radius: 30px; */
    32.                 width: 700px;
    33.                 height: 9px;
    34.                 top: -1px;
    35.                 left: -100%;
    36.             }
    37.             .dot {
    38.                 position: absolute;
    39.                 display: inline-block;
    40.                 width: 16px;
    41.                 height: 16px;
    42.                 border-radius: 50%;
    43.                 background: pink;
    44.                 top: 50%;
    45.                 left: 0;
    46.                 transform: translate(-50%,-50%);
    47.             }
    48.         </style>
    49.     </head>
    50.     <body>
    51.         <div class="kuang">
    52.                 <div class="overflow">
    53.                     <div class="bg"></div>
    54.                 </div>
    55.                 <a class="dot" draggable="false">
    56.                     <div class="line"></div>
    57.                 </a>
    58.             </div>
    59.             <script type="text/javascript">
    60.                 window.onload = function() {
    61.                     var kuang = document.querySelector(".kuang");
    62.                     var dot = document.querySelector('.dot');
    63.                     var bg = document.querySelector('.bg');
    64.                     var load1 = kuang.clientWidth * 0.1666;
    65.                     var load2 = kuang.clientWidth * 0.3333;
    66.                     var load3 = kuang.clientWidth * 0.5;
    67.                     var load4 = kuang.clientWidth * 0.6666;
    68.                     var load5 = kuang.clientWidth * 0.8333;
    69.                     var load6 = kuang.clientWidth;
    70.                     dot.onmousedown = function() {
    71.                         document.onmousemove = function(e) {
    72.                             var e = e || window.event;
    73.                             var x = e.clientX;
    74.                             var y = e.clientY;
    75.                             var mx = x - kuang.offsetLeft;
    76.                             var my = y - kuang.offsetTop;
    77.                             if(mx < load1) {
    78.                                 dot.style.left = 0;
    79.                                 bg.style.left = -load6 + 'px';
    80.                             } else if(mx > load1 && mx < load3) {
    81.                                 dot.style.left = load2 + 'px';
    82.                                 bg.style.left = -load4 + 'px';
    83.                             } else if(mx > load3 && mx < load5) {
    84.                                 dot.style.left = load4 + 'px';
    85.                                 bg.style.left = -load2 + 'px';
    86.                             } else if(mx > load5) {
    87.                                 dot.style.left = load6 + 'px';
    88.                                 bg.style.left = 0;
    89.                             }
    90.                             window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
    91.                         }
    92.                     }
    93.                     kuang.onclick = function(e) {
    94.                         var e = e || window.event;
    95.                         var x = e.clientX;
    96.                         var y = e.clientY;
    97.                         var mx = x - kuang.offsetLeft;
    98.                         var my = y - kuang.offsetTop;
    99.                         if(mx < load1) {
    100.                             dot.style.left = 0;
    101.                             bg.style.left = -load6 + 'px';
    102.                         } else if(mx > load1 && mx < load3) {
    103.                             dot.style.left = load2 + 'px';
    104.                             bg.style.left = -load4 + 'px';
    105.                         } else if(mx > load3 && mx < load5) {
    106.                             dot.style.left = load4 + 'px';
    107.                             bg.style.left = -load2 + 'px';
    108.                         } else if(mx > load5) {
    109.                             dot.style.left = load6 + 'px';
    110.                             bg.style.left = 0;
    111.                         }
    112.                     }
    113.                     document.onmouseup = function() {
    114.                         document.onmousemove = null;
    115.                     }
    116.                     /*移动端try*/
    117.                     function touchmove(event) {
    118.                         var touch = event.targetTouches[0];
    119.                         var mx = touch.pageX - kuang.offsetLeft;
    120.                         if(event.targetTouches.length == 1) {　　　　
    121.                             event.preventDefault();
    122.                             if(mx < load1) {
    123.                                 dot.style.left = 0;
    124.                                 bg.style.left = -load6 + 'px';
    125.                             } else if(mx > load1 && mx < load3) {
    126.                                 dot.style.left = load2 + 'px';
    127.                                 bg.style.left = -load4 + 'px';
    128.                             } else if(mx > load3 && mx < load5) {
    129.                                 dot.style.left = load4 + 'px';
    130.                                 bg.style.left = -load2 + 'px';
    131.                             } else if(mx > load5) {
    132.                                 dot.style.left = load6 + 'px';
    133.                                 bg.style.left = 0;
    134.                             }
    135.                         }
    136.                     }
    138.                     function touchstart(e) {
    139.                         kuang.addEventListener('touchmove', touchmove, false);
    140.                     }
    141.                     dot.addEventListener("touchstart", touchstart, false);
    142.                     document.addEventListener("touchend", function() {
    143.                       //dot.removeEventListener("touchstart",touchstart,false);  
    144.                         kuang.removeEventListener("touchmove", touchmove, false);
    145.                     });
    146.                 }
    147.             </script>
    148.     </body>
    149. </html>

    其中有注意的问题！！！

    1. window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();  //实现元素拖动时，出现禁止图标。