如何使用原生js实现可兼容PC和移动端的拖动滑块功能-创新互联

小编给大家分享一下如何使用原生js实现可兼容PC和移动端的拖动滑块功能，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

具体如下：

在PC端可以用mousedown来触发一个滑块滑动的效果，但在手机上，貌似无法识别这个事件，但手机上有touchstart事件，可以通过一系列“touch”事件来替代PC端的“mouse”事件。

移动端触屏滑动的效果其实就是图片轮播，在PC的页面上很好实现，绑定click和mouseover等事件来完成。但是在移动设备上，要实现这种轮播的效果，就需要用到核心的touch事件。处理touch事件能跟踪到屏幕滑动的每根手指。

以下是四种touch事件

• touchstart:     //手指放到屏幕上时触发

• touchmove:      //手指在屏幕上滑动式触发

• touchend:    //手指离开屏幕时触发

• touchcancel:     //系统取消touch事件的时候触发，这个好像比较少用

每个触摸事件被触发后，会生成一个event对象，event对象里额外包括以下三个触摸列表

• touches:     //当前屏幕上所有手指的列表

• targetTouches:      //当前dom元素上手指的列表，尽量使用这个代替touches

• changedTouches:     //涉及当前事件的手指的列表，尽量使用这个代替touches

这些列表里的每次触摸由touch对象组成，touch对象里包含着触摸信息，主要属性如下：

• clientX / clientY:      //触摸点相对浏览器窗口的位置

• pageX / pageY:       //触摸点相对于页面的位置

• screenX  /  screenY:    //触摸点相对于屏幕的位置

• identifier:        //touch对象的ID

• target:       //当前的DOM元素

  
    
    
    
    
      .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