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

原生js实现的移动端可拖动进度条插件功能详解

Posted in Javascript onAugust 15, 2019

本文实例讲述了原生js实现的移动端可拖动进度条插件功能。分享给大家供大家参考，具体如下：

该插件最初的想法来自网上的一篇文章，直达链接：//3water.com/article/167717.htm

笔者因为业务需要寻找到这个插件，然后拿来用之，发现各种不方便，然后便开始了改造之路。

上代码：

<script>
    function dragSlide(id) {
      this.minDiv =document.getElementById(id); //小方块 
      this.width = parseInt(window.getComputedStyle(this.minDiv, null).width); //小方块的宽度
      this.lineDiv = this.minDiv.parentNode; //长线条
      //滑动的数值呈现
      this.vals = this.minDiv.children[0];
      var that=this;
      var move = function(e) {
        var x = e.touches[0].pageX;
        var lineDiv_left = that.getPosition(that.lineDiv).left; //长线条的横坐标
        var minDiv_left = x - lineDiv_left; //小方块相对于父元素（长线条）的left值
        if (minDiv_left >= that.lineDiv.offsetWidth - that.width) {
          minDiv_left = that.lineDiv.offsetWidth - that.width;
        }
        if (minDiv_left <0 ) {
          minDiv_left = 0;
        }
        //设置拖动后小方块的left值
        that.minDiv.style.left = minDiv_left + "px";
        //percent百分比改为如下所示,解决开始和最后滑动的体验不好问题
        var percent = (minDiv_left / (that.lineDiv.offsetWidth - that.width)) * 100;
        if (percent > 0 && percent < 0.5) {
          percent = Math.ceil(percent);
        } else {
          percent = Math.floor(percent);
        }
        that.vals.innerText = percent;
      }
      //获取元素的绝对位置,工具函数
      this.getPosition = function(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
        };
      }
      this.minDiv.addEventListener("touchmove", move);
    }
    var drag0 = new dragSlide("minDiv");
    var drag1 = new dragSlide("minDiv1");
    //取消移动端手势长按弹出提示框的操作
    document.addEventListener('contextmenu', function(e) {
      e.preventDefault();
    });
</script>

html和css部分没有改动，而js改动还是很大的，比较原来作者的文章，改动点如下

1）整体上，原来不是插件，改造之后成为一个可以复用的插件，虽然简单了点

2）只是将其改造为适用于移动端的插件

3）通过对开始滑动和结束滑动比例的处理，优化了开始滑动和结束滑动的体验

4）移动端加了防止长按弹出提示框的代码

5）小滑块的宽度改为动态

改造之后的整体案例，需要指出：笔者主要用在微信端，至于其他浏览器滑块的体验不是很好，还有滑块滑动体验跟小块的尺寸有直接关系。

<!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,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: -12.5px;
    left: 0;
    width: 30px;
    height: 30px;
    background: green;
    cursor: pointer
  }
  .lineDiv .minDiv .vals {
    position: absolute;
    font-size: 20px;
    top: -45px;
    left: -2.5px;
    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;
  }
  * {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  </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>
  <div style="height: 20px;"></div>
  <div id="lineDiv" class="lineDiv">
    <div id="minDiv1" class="minDiv">
      <div id="vals" class="vals">0</div>
    </div>
  </div>
  <script>
  //避免默认事件 2018.7.10 更新 优化uc浏览器左右滑动时候页面被拖动
  document.addEventListener('touchmove', function(e) {
    e.preventDefault();
  }, { passive: false });
  function dragSlide(id) {
    this.minDiv = document.getElementById(id); //小方块 
    this.width = parseInt(window.getComputedStyle(this.minDiv, null).width); //小方块的宽度
    this.lineDiv = this.minDiv.parentNode; //长线条
    //滑动的数值呈现
    this.vals = this.minDiv.children[0];
    var that = this;
    var lastX = null; //判断鼠标移动方向，解决向左侧滑动时候的bug
    var move = function(e) {
      var x = e.touches[0].pageX,
        direction = '';
      if (lastX == null) {
        lastX = x;
        return;
      }
      if (x > lastX) {
        direction = 'right';
      } else if (x < lastX) {
        direction = 'left';
      } else {
        direction = '';
      }
      var lineDiv_left = that.getPosition(that.lineDiv).left; //长线条的横坐标
      var minDiv_left = x - lineDiv_left; //小方块相对于父元素（长线条）的left值
      if (minDiv_left >= that.lineDiv.offsetWidth - that.width) {
        minDiv_left = that.lineDiv.offsetWidth - that.width;
      }
      if (minDiv_left < 0) {
        minDiv_left = 0;
      }
      //设置拖动后小方块的left值
      that.minDiv.style.left = minDiv_left + "px";
      //percent百分比改为如下所示,解决开始和最后滑动的体验不好问题
      var percent = (minDiv_left / (that.lineDiv.offsetWidth - that.width)) * 100;
      if (percent < 0.5 && direction == 'right') {
        percent = Math.ceil(percent);
      } else if (percent > 0.5 && direction == 'right') {
        percent = Math.floor(percent);
      } else {
        percent = Math.ceil(percent);
      }
      that.vals.innerText = percent;
    }
    //获取元素的绝对位置,工具函数
    this.getPosition = function(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
      };
    }
    this.minDiv.addEventListener("touchmove", move);
  }
  var drag0 = new dragSlide("minDiv");
  var drag1 = new dragSlide("minDiv1");
  //取消移动端手势长按弹出提示框的操作
  document.addEventListener('contextmenu', function(e) {
    e.preventDefault();
  });
  </script>
</body>
</html>

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

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

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

原生js实现的移动端可拖动进度条插件功能详解

- Author -

我站在山顶上

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

Javascript 相关文章推荐
表单的一些基本用法与技巧
Jul 15 Javascript
js之事件冒泡和事件捕获详细介绍
Oct 28 Javascript
jQuery 获取浏览器所在的IP地址的小例子
Nov 08 Javascript
用JS实现3D球状标签云示例代码
Dec 01 Javascript
JavaScript获取两个数组交集的方法
Jun 09 Javascript
JavaScript实现横向滑出的多级菜单效果
Oct 09 Javascript
jQuery解析json数据实例分析
Nov 24 Javascript
简介EasyUI datagrid editor combogrid搜索框的实现
Apr 01 Javascript
基于js实现的限制文本框只可以输入数字
Dec 05 Javascript
mpvue构建小程序的方法(步骤+地址)
May 22 Javascript
vsCode安装使用教程和插件安装方法
Aug 24 Javascript
Jquery滑动门/tab切换实现方法完整示例
Jun 05 jQuery
快速对接payjq的个人微信支付接口过程解析
Aug 15 #Javascript
Element-UI中关于table表格的那些骚操作(小结)
Aug 15 #Javascript
原生js实现可兼容PC和移动端的拖动滑块功能详解【测试可用】
Aug 15 #Javascript
js设计模式之单例模式原理与用法详解
Aug 15 #Javascript
js设计模式之代理模式及订阅发布模式实例详解
Aug 15 #Javascript
JS实现水平遍历和嵌套递归操作示例
Aug 15 #Javascript
angularjs1.X 重构controller 的方法小结
Aug 15 #Javascript
win7(2) 滚动条(1) Sentry(1) Sunmao(1) 输入法(2) 声卡驱动(1) svg(1) 403(1) 蓝屏(1) sout(1)
You might like
PHP 年龄计算函数(精确到天)
2012/06/07 PHP
php调用MySQL存储过程的方法集合(推荐)
2013/07/03 PHP
ThinkPHP令牌验证实例
2014/06/18 PHP
php之curl设置超时实例
2014/11/03 PHP
php实现微信公众号主动推送消息
2015/12/31 PHP
PHP实现浏览器格式化显示XML的方法示例
2019/01/22 PHP
JavaScript 以对象为索引的关联数组
2010/05/19 Javascript
JavaScript学习笔记（一） js基本语法
2011/10/25 Javascript
jQuery 阴影插件代码分享
2012/01/09 Javascript
jQuery焦点图切换特效插件封装实例
2013/08/18 Javascript
简单谈谈javascript Date类型
2015/09/06 Javascript
JS实现的最简Table选项卡效果
2015/10/14 Javascript
浅谈JavaScript中小数和大整数的精度丢失
2016/05/31 Javascript
jquery实现用户登陆界面(示例讲解)
2017/09/06 jQuery
详解微信小程序中的页面代码中的模板的封装
2017/10/12 Javascript
webpack将js打包后的map文件详解
2018/02/22 Javascript
vue实现倒计时获取验证码效果
2020/04/17 Javascript
小程序input数据双向绑定实现方法
2019/10/17 Javascript
python使用ctypes模块调用windowsapi获取系统版本示例
2014/04/17 Python
python爬虫入门教程之点点美女图片爬虫代码分享
2014/09/02 Python
Python中使用pprint函数进行格式化输出的教程
2015/04/07 Python
django中的HTML控件及参数传递方法
2018/03/20 Python
Python 面试中 8 个必考问题
2018/11/16 Python
Python多进程写入同一文件的方法
2019/01/14 Python
python识别图像并提取文字的实现方法
2019/06/28 Python
python实现百度OCR图片识别过程解析
2020/01/17 Python
Django使用Celery加redis执行异步任务的实例内容
2020/02/20 Python
python实现字符串和数字拼接
2020/03/02 Python
Python调用REST API接口的几种方式汇总
2020/10/19 Python
地图可视化神器kepler.gl python接口的使用方法
2020/12/22 Python
CSS3径向渐变之大鱼吃小鱼之孤单的大鱼
2016/04/26 HTML / CSS
澳洲最大的时尚奢侈品电商平台：Cettire
2020/06/15 全球购物
毕业生就业推荐表自我鉴定
2014/03/20 职场文书
甜品店创业计划书
2014/09/21 职场文书
个人工作表现评价材料
2014/09/21 职场文书
WINDOWS下安装mysql 8.x 的方法图文教程
2022/04/19 MySQL