首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

原生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程序设计有所帮助。

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

- Author -

最骚的就是你

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

Javascript 相关文章推荐
javascript 关闭IE6、IE7
Jun 01 Javascript
javascript实现的在当前窗口中漂浮框的代码
Mar 15 Javascript
Jquery常用技巧收集整理篇
Nov 14 Javascript
一个支付页面DEMO附截图
Jul 22 Javascript
基于javascript实现图片懒加载
Jan 05 Javascript
Javascript日期格式化format函数的使用方法
Aug 30 Javascript
javascript实现将数字转成千分位的方法小结【5种方式】
Dec 11 Javascript
bootstrap选项卡扩展功能详解
Jun 14 Javascript
vue实现父子组件之间的通信以及兄弟组件的通信功能示例
Jan 29 Javascript
微信小程序实现的图片保存功能示例
Apr 24 Javascript
Layui 解决表格异步调用后台分页的问题
Oct 26 Javascript
解决vue初始化项目时,一直卡在Project description上的问题
Oct 31 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
中学科技(1) 烈阳天道(2) 萨拉雷(1) 长波(3) 下载(1) 怀旧期刊(1) 短波(8) 保养(1) 无线电(12) 广播(8)
You might like
PHP包含文件函数include、include_once、require、require_once区别总结
2014/04/05 PHP
php使用array_search函数实现数组查找的方法
2015/06/12 PHP
php文档工具PHP Documentor安装与使用方法
2016/01/25 PHP
使用phpQuery获取数组的实例
2017/03/13 PHP
PHP批斗大会之缺失的异常详解
2019/07/09 PHP
redis+php实现微博（一）注册与登录功能详解
2019/09/23 PHP
Extjs学习笔记之九 数据模型(上）
2010/01/11 Javascript
JQuery 1.4 中的Ajax问题
2010/01/23 Javascript
纯js网页画板(Graphics)类简介及实现代码
2012/12/24 Javascript
jQuery数据检索中根据关键字快速定位GridView指定行的实现方法
2016/06/08 Javascript
给easyui datebox扩展一个清空的实例
2016/11/09 Javascript
Angular2入门教程之模块和组件详解
2017/05/28 Javascript
JavaScript反射与依赖注入实例详解
2018/05/29 Javascript
vue awesome swiper异步加载数据出现的bug问题
2018/07/03 Javascript
vue地址栏直接输入路由无效问题的解决
2018/11/15 Javascript
JavaScript遍历数组的三种方法map、forEach与filter实例详解
2019/02/27 Javascript
JS正则表达式封装与使用操作示例
2019/05/15 Javascript
解决echarts数据二次渲染不成功的问题
2020/07/20 Javascript
Element InfiniteScroll无限滚动的具体使用方法
2020/07/27 Javascript
Python数字图像处理之霍夫线变换实现详解
2018/01/12 Python
Python实现自定义函数的5种常见形式分析
2018/06/16 Python
python3实现字符串的全排列的方法(无重复字符)
2018/07/07 Python
Python检查ping终端的方法
2019/01/26 Python
Pandas之DataFrame对象的列和索引之间的转化
2019/06/25 Python
如何理解python面向对象编程
2020/06/01 Python
python+django+selenium搭建简易自动化测试
2020/08/19 Python
利用HTML5 Canvas制作一个简单的打飞机游戏
2015/05/11 HTML / CSS
美国大尺码女装零售商：TORRID
2016/10/01 全球购物
远程学习的教学用品和家庭学习资源：Really Good Stuff
2020/04/27 全球购物
法院实习人员自我鉴定
2013/09/26 职场文书
学生拾金不昧表扬信
2014/01/21 职场文书
单位绩效考核方案
2014/05/11 职场文书
2015年元旦联欢晚会活动总结
2014/11/28 职场文书
通知范文怎么写
2015/04/16 职场文书
2015年党建工作目标责任书
2015/05/08 职场文书
2019年怎样写好导游词？
2019/07/02 职场文书