原生js实现可兼容PC和移动端的拖动滑块功能详解【测试可用】

前端  /  管理员 发布于 4年前   542

本文实例讲述了原生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元素

                                
用鼠标拖动小方块0%
        
      
        
0                

兼容PC端和移动端：

                                
用鼠标拖动小方块0%
        
      
        
0                

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools..net.cn/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容可查看本站专题：《JavaScript页面元素操作技巧总结》、《JavaScript操作DOM技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

您可能感兴趣的文章:

• 基于JS组件实现拖动滑块验证功能(代码分享)
• 基于JavaScript实现拖动滑块效果
• Vue 实现拖动滑块验证功能(只有css+js没有后台验证步骤)
• js用拖动滑块来控制图片大小的方法
• js拖动滑块和点击水波纹效果实例代码
• js实现兼容PC端和移动端滑块拖动选择数字效果
• JS响应鼠标点击实现两个滑块区间拖动效果
• js 鼠标拖动对象 可让任何div实现拖动效果
• javascript 事件处理、鼠标拖动效果实现方法详解
• js实现可拖动DIV的方法
• JS实现弹出浮动窗口(支持鼠标拖动和关闭)实例详解