手把手教你做一个原生 js 拖动滑块

3,249 阅读2分钟
原文链接: www.cnblogs.com

废话少说:

在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