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


Posted in Javascript onAugust 15, 2019

本文实例讲述了原生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元素
<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>鼠标拖动小方块</title>
    <style type="text/css">
      .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;
      }
    </style>
  </head>
  <body>
    <center>
      <h3>用鼠标拖动小方块<span id="msg">0</span>%</h3>
    </center>
    <div id="lineDiv" class="lineDiv">
      <div id="minDiv" class="minDiv">
        <div id="vals" class="vals">0</div>
      </div>
    </div>
    <script>
      window.onload = function() {
        var lineDiv = document.getElementById('lineDiv'); //长线条
        var minDiv = document.getElementById('minDiv'); //小方块
        var msg = document.getElementById("msg");
        var vals = document.getElementById("vals");
        var ifBool = false; //判断鼠标是否按下
        //鼠标按下方块
        minDiv.addEventListener("touchstart", function(e) {
          e.stopPropagation();
          ifBool = true;
          console.log("鼠标按下")
        });
        //拖动
        window.addEventListener("touchmove", function(e) {
          console.log("鼠标拖动")
          if(ifBool) {
            var x = e.touches[0].pageX || e.touches[0].clientX; //鼠标横坐标var x
            var lineDiv_left = getPosition(lineDiv).left; //长线条的横坐标
            var minDiv_left = x - lineDiv_left; //小方块相对于父元素(长线条)的left值
            if(minDiv_left >= lineDiv.offsetWidth - 15) {
              minDiv_left = lineDiv.offsetWidth - 15;
            }
            if(minDiv_left < 0) {
              minDiv_left = 0;
            }
            //设置拖动后小方块的left值
            minDiv.style.left = minDiv_left + "px";
            msg.innerText = parseInt((minDiv_left / (lineDiv.offsetWidth - 15)) * 100);
            vals.innerText = parseInt((minDiv_left / (lineDiv.offsetWidth - 15)) * 100);
          }
        });
        //鼠标松开
        window.addEventListener("touchend", function(e) {
          console.log("鼠标弹起")
          ifBool = false;
        });
        //获取元素的绝对位置
        function getPosition(node) {
          var left = node.offsetLeft; //获取元素相对于其父元素的left值var left
          var top = node.offsetTop;
          current = node.offsetParent; // 取得元素的offsetParent
           // 一直循环直到根元素
          while(current != null) {
            left += current.offsetLeft;
            top += current.offsetTop;
            current = current.offsetParent;
          }
          return {
            "left": left,
            "top": top
          };
        }
      }
    </script>
  </body>
</html>

兼容PC端和移动端:

<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>鼠标拖动小方块</title>
    <style type="text/css">
      .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;
      }
    </style>
  </head>
  <body>
    <center>
      <h3>用鼠标拖动小方块<span id="msg">0</span>%</h3>
    </center>
    <div id="lineDiv" class="lineDiv">
      <div id="minDiv" class="minDiv">
        <div id="vals" class="vals">0</div>
      </div>
    </div>
    <script>
      window.onload = function() {
        var lineDiv = document.getElementById('lineDiv'); //长线条
        var minDiv = document.getElementById('minDiv'); //小方块
        var msg = document.getElementById("msg");
        var vals = document.getElementById("vals");
        var ifBool = false; //判断鼠标是否按下
        //事件
        var start = function(e) {
          e.stopPropagation();
          ifBool = true;
          console.log("鼠标按下")
        }
        var move = function(e) {
          console.log("鼠标拖动")
          if(ifBool) {
            if(!e.touches) {  //兼容移动端
              var x = e.clientX;
            } else {   //兼容PC端
              var x = e.touches[0].pageX;
            }
            //var x = e.touches[0].pageX || e.clientX; //鼠标横坐标var x
            var lineDiv_left = getPosition(lineDiv).left; //长线条的横坐标
            var minDiv_left = x - lineDiv_left; //小方块相对于父元素(长线条)的left值
            if(minDiv_left >= lineDiv.offsetWidth - 15) {
              minDiv_left = lineDiv.offsetWidth - 15;
            }
            if(minDiv_left < 0) {
              minDiv_left = 0;
            }
            //设置拖动后小方块的left值
            minDiv.style.left = minDiv_left + "px";
            msg.innerText = parseInt((minDiv_left / (lineDiv.offsetWidth - 15)) * 100);
            vals.innerText = parseInt((minDiv_left / (lineDiv.offsetWidth - 15)) * 100);
          }
        }
        var end = function(e) {
            console.log("鼠标弹起")
            ifBool = false;
          }
          //鼠标按下方块
        minDiv.addEventListener("touchstart", start);
        minDiv.addEventListener("mousedown", start);
        //拖动
        window.addEventListener("touchmove", move);
        window.addEventListener("mousemove", move);
        //鼠标松开
        window.addEventListener("touchend", end);
        window.addEventListener("mouseup", end);
        //获取元素的绝对位置
        function getPosition(node) {
          var left = node.offsetLeft; //获取元素相对于其父元素的left值var left
          var top = node.offsetTop;
          current = node.offsetParent; // 取得元素的offsetParent
           // 一直循环直到根元素
          
          while(current != null) {
            left += current.offsetLeft;
            top += current.offsetTop;
            current = current.offsetParent;
          }
          return {
            "left": left,
            "top": top
          };
        }
      }
    </script>
  </body>
</html>

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

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

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

Javascript 相关文章推荐
prototype1.4中文手册
Sep 22 Javascript
js 鼠标拖动对象 可让任何div实现拖动效果
Nov 09 Javascript
js 定时器setTimeout无法调用局部变量的解决办法
Nov 28 Javascript
node.js中的querystring.escape方法使用说明
Dec 10 Javascript
常用的js验证和数据处理总结
Aug 02 Javascript
Angularjs使用过滤器完成排序功能
Sep 20 Javascript
vue 监听键盘回车事件详解 @keyup.enter || @keyup.enter.native
Aug 25 Javascript
Angular5中状态管理的实现
Sep 03 Javascript
vue-cli3+typescript初体验小结
Feb 28 Javascript
微信小程序swiper使用网络图片不显示问题解决
Dec 13 Javascript
原生Vue 实现右键菜单组件功能
Dec 16 Javascript
vue项目中使用vue-layer弹框插件的方法
Mar 11 Javascript
js设计模式之单例模式原理与用法详解
Aug 15 #Javascript
js设计模式之代理模式及订阅发布模式实例详解
Aug 15 #Javascript
JS实现水平遍历和嵌套递归操作示例
Aug 15 #Javascript
angularjs1.X 重构controller 的方法小结
Aug 15 #Javascript
浅析Vue中拆分视图层代码的5点建议
Aug 15 #Javascript
vue的keep-alive用法技巧
Aug 15 #Javascript
Vue开发环境中修改端口号的实现方法
Aug 15 #Javascript
You might like
用php和MySql来与ODBC数据连接
2006/10/09 PHP
php disk_free_space 返回目录可用空间
2010/05/10 PHP
php 删除记录同时删除图片文件的实现代码
2010/05/12 PHP
php 缩略图实现函数代码
2011/06/23 PHP
PHP命令空间namespace及use的用法小结
2017/11/27 PHP
Laravel5.1 框架Request请求操作常见用法实例分析
2020/01/04 PHP
Web开发者必备的12款超赞jQuery插件
2010/12/03 Javascript
工作需要写的一个js拖拽组件
2011/07/28 Javascript
javascript 获取iframe里页面中元素值的方法
2014/02/17 Javascript
jQuery实现鼠标点击弹出渐变层的方法
2015/07/09 Javascript
详解JavaScript的另类写法
2016/04/11 Javascript
前端面试知识点锦集(JavaScript篇)
2016/12/28 Javascript
JavaScript计时器用法分析【setTimeout和clearTimeout】
2017/01/18 Javascript
html5+canvas实现支持触屏的签名插件教程
2017/05/08 Javascript
bootstrap multiselect下拉列表功能
2017/08/22 Javascript
js实现图片放大并跟随鼠标移动特效
2019/01/18 Javascript
小程序跨页面交互的作用与方法详解
2020/01/07 Javascript
将Python中的数据存储到系统本地的简单方法
2015/04/11 Python
Python实现HTTP协议下的文件下载方法总结
2016/04/20 Python
详解Python中的from..import绝对导入语句
2016/06/21 Python
Python爬豆瓣电影实例
2018/02/23 Python
解决Python requests库编码 socks5代理的问题
2018/05/07 Python
python批量下载网站马拉松照片的完整步骤
2018/12/05 Python
Python获取指定网段正在使用的IP
2020/12/14 Python
python pillow库的基础使用教程
2021/01/13 Python
extern是什么意思
2016/03/10 面试题
机械电子工程专业推荐信范文
2013/11/20 职场文书
单位消防安全制度
2014/01/12 职场文书
大学毕业感言50字
2014/02/07 职场文书
高中语文课后反思
2014/04/27 职场文书
校运会口号
2014/06/18 职场文书
人事行政专员岗位职责
2014/07/23 职场文书
2015年计算机教学工作总结
2015/07/22 职场文书
新闻报道稿范文
2015/07/23 职场文书
如何写好竞聘报告
2019/04/03 职场文书
MySQL的意向共享锁、意向排它锁和死锁
2022/07/15 MySQL