编程 Javascript

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

Posted in Javascript onAugust 15, 2019

本文实例讲述了原生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程序设计有所帮助。

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

- Author -

最骚的就是你

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

js option删除代码集合

Nov 12 Javascript

防止文件缓存的js代码

Jan 10 Javascript

javascript中局部变量和全局变量的区别详解

Feb 27 Javascript

Js操作DOM元素及获取浏览器高宽的简单方法

Sep 08 Javascript

javascript实现鼠标点击页面移动DIV

Dec 02 Javascript

vue.js声明式渲染和条件与循环基础知识

Jul 31 Javascript

React通过父组件传递类名给子组件的实现方法

Nov 13 Javascript

解决Vue.js 2.0 有时双向绑定img src属性失败的问题

Mar 14 Javascript

react配合antd组件实现的管理系统示例代码

Apr 24 Javascript

angular中子控制器向父控制器传值的实例

Oct 08 Javascript

Vue中正确使用Element-UI组件的方法实例

Oct 13 Javascript

JavaScript中layim之整合右键菜单的示例代码

Feb 06 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