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

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

成都创新互联公司,为您提供重庆网站建设网站制作公司、网站营销推广、网站开发设计,对服务履带搅拌车等多个行业拥有丰富的网站建设及推广经验。成都创新互联公司网站建设公司成立于2013年,提供专业网站制作报价服务,我们深知市场的竞争激烈,认真对待每位客户,为客户提供赏心悦目的作品。 与客户共同发展进步,是我们永远的责任!

具体如下:

如何使用原生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
      
    
       

兼容PC端和移动端:



  
    
    
    鼠标拖动小方块
    
      .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
                   

以上是“如何使用原生js实现可兼容PC和移动端的拖动滑块功能”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!


网站名称:如何使用原生js实现可兼容PC和移动端的拖动滑块功能
链接地址:http://scyanting.com/article/ggioeh.html

其他资讯