华山资源网

原生js实现可兼容PC和移动端的拖动滑块功能详解【测试可用】
网络编程 2024/12/27 佚名
3 1

本文实例讲述了原生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.jb51.net/code/HtmlJsRun测试上述代码运行效果。

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

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

华山资源网 Design By www.eoogi.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
华山资源网 Design By www.eoogi.com
www.eoogi.com 华山资源网
120,135影音资源
344,641技术资源
22,817软件资源
435,032站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
华山资源网 Design By www.eoogi.com