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

Javascript 相关文章推荐
js escape,unescape解决中文乱码问题的方法
May 26 Javascript
jQuery UI Dialog 创建友好的弹出对话框实现代码
Apr 12 Javascript
jquery操作select大全
Apr 25 Javascript
通过JQuery将DIV的滚动条滚动到指定的位置方便自动定位
May 05 Javascript
js中unicode转码方法详解
Oct 09 Javascript
Bootstrap源码解读排版(1)
Dec 23 Javascript
正则 js分转元带千分符号详解
Mar 08 Javascript
Angular实现图片裁剪工具ngImgCrop实践
Aug 17 Javascript
jQuery实现锚点向下平滑滚动特效示例
Aug 29 jQuery
three.js中文文档学习之通过模块导入
Nov 20 Javascript
Vue性能优化的方法
Jul 30 Javascript
javascript进阶篇深拷贝实现的四种方式
Jul 07 Javascript
快速对接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
You might like
php flush类输出缓冲剖析
2008/10/19 PHP
利用Memcached在php下实现session机制 替换PHP的原生session支持
2010/08/21 PHP
PHP中使用gettext来支持多语言的方法
2011/05/02 PHP
深入理解PHP内核(一)
2015/11/10 PHP
PHP的邮件群发系统phplist配置方法详细总结
2016/03/30 PHP
Yii CGridView用法实例详解
2016/07/12 PHP
PHP实现获取第一个中文首字母并进行排序的方法
2017/05/09 PHP
PHP抽象类和接口用法实例详解
2019/07/20 PHP
JavaScript 撑出页面文字换行
2009/06/15 Javascript
JavaScript高级程序设计 阅读笔记(十三) js定义类或对象
2012/08/14 Javascript
首页图片漂浮效果示例代码
2014/06/05 Javascript
Angular用来控制元素的展示与否的原生指令介绍
2015/01/07 Javascript
Jquery中Event对象属性小结
2015/02/27 Javascript
js实现星星打分效果的方法
2020/07/05 Javascript
AngularJS中使用HTML5手机摄像头拍照
2016/02/22 Javascript
JS实现设置ff与ie元素绝对位置的方法
2016/03/08 Javascript
使用jQuery.form.js/springmvc框架实现文件上传功能
2016/05/12 Javascript
js事件冒泡、事件捕获和阻止默认事件详解
2016/08/04 Javascript
Bootstrap popover用法详解
2016/12/22 Javascript
JS正则获取HTML元素的方法
2017/03/31 Javascript
vue中$refs的用法及作用详解
2018/04/24 Javascript
详解webpack的clean-webpack-plugin插件报错
2020/10/16 Javascript
Python2.x版本中maketrans()方法的使用介绍
2015/05/19 Python
Python高级特性——详解多维数组切片(Slice)
2019/11/26 Python
Pytorch evaluation每次运行结果不同的解决
2020/01/02 Python
Kmeans均值聚类算法原理以及Python如何实现
2020/09/26 Python
html5指南-4.使用Geolocation实现定位功能
2013/01/07 HTML / CSS
有关HTML5 Video对象的ontimeupdate事件(Chrome上无效)的问题
2013/07/19 HTML / CSS
维氏瑞士军刀英国网站:Victorinox英国
2019/07/04 全球购物
黑猩猩商店:The Chimp Store
2020/02/12 全球购物
毕业生个人求职的自我评价
2013/10/28 职场文书
好的演讲稿开场白
2013/12/30 职场文书
财务会计专业求职信范文
2013/12/31 职场文书
文明城市标语
2014/06/16 职场文书
医药公司采购员岗位职责
2015/04/03 职场文书
《艾尔登法环》发布最新「战技」宣传片
2022/04/03 其他游戏