js实现滑动进度条效果


Posted in Javascript onAugust 21, 2020

本文实例为大家分享了js实现滑动进度条效果的具体代码,供大家参考,具体内容如下

js实现滑动进度条效果

进度条:

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>js滑动进度条效果</title>
 <style>
  *{margin:0;padding:0;user-select:none;}
  .progress-bar{position:relative;height:10px;width:400px;margin:200px auto;background:#ebeef5;border-radius:10px;}
  .progress-bar .pro-bar{position:absolute;left:0;height:10px;width:10px;background:#409eff;}
  .progress-bar .min-num{position:absolute;left:-20px;top:-5px;}
  .progress-bar .max-num{position:absolute;right:-40px;top:-5px;}
  .progress-bar .block {position:absolute;height:30px;width:10px;background:#ccc;top:-10px;border-radius:10px;}
  .progress-bar .block div{position:absolute;display:none;left:-20px;top:-45px;width:50px;height:30px;text-align:center;line-height:30px;background:#ccc;border-radius:20px;}
  .progress-bar .block:hover div{display:block;font-size:10%;color:#fff;background:#409eff;}
 </style>
</head>
<body>
 <div class="progress-bar">
 <span class="min-num">0</span>
 <span class="max-num">100</span>
 <div class="pro-bar"></div>
 <div class="block">
  <div>0</div>
 </div>
 </div>
</body>
<script>
 (function(){
 let moveBlock = document.querySelector('.block');
 let proBar = document.querySelector('.pro-bar');
 let flag = false;
 let startX = null;
 let moveMax = (400 - 10); // 背景条宽度减去滑块的宽度
 moveBlock.onmousedown = function(e){
  startX = e.pageX;
  moveBlock.style.left ? moveBlock.style.left : moveBlock.style.left = '0px';
  let startLeft = parseInt(moveBlock.style.left);
  document.onmousemove = function(e){
  let moveX = (e.pageX - startX) > 0 ? true : false;
  let moveSection = startLeft + (e.pageX - startX);
  // 限定移动范围
  if (moveSection >= 0 && moveSection <= moveMax) {
   let percent = ((startLeft + (e.pageX - startX)) / moveMax).toFixed(4) * 100;
   percent.toString().length > 5 ? percent = percent.toString().subStr(0, 5) : percent = percent.toString();
   moveBlock.style.left = startLeft + (e.pageX - startX) + 'px';
   proBar.style.width = moveBlock.style.left;
   moveBlock.querySelector('div').innerText = percent + '%';
  }
  };
 };
 // 鼠标松开移除事件
 moveBlock.onmouseup = function(){
  document.onmousemove = null;
 };
 })();
</script>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js资料prototype 属性
Mar 13 Javascript
JS处理VBArray的函数使用说明
May 11 Javascript
jQuery用unbind方法去掉hover事件及其他方法介绍
Mar 18 Javascript
基于jQuery.Validate验证库知识点的详解
Apr 26 Javascript
JQuery实现动态适时改变字体颜色的方法
Mar 10 Javascript
详解JavaScript中的4种类型识别方法
Sep 14 Javascript
jQuery实现标题有打字效果的焦点图代码
Nov 16 Javascript
jquery删除数组中重复元素
Dec 05 Javascript
JavaScript 异步调用
Oct 25 Javascript
详解plotly.js 绘图库入门使用教程
Feb 23 Javascript
简述vue状态管理模式之vuex
Aug 29 Javascript
详解Vuex下Store的模块化拆分实践
Jul 31 Javascript
探索浏览器页面关闭window.close()的使用详解
Aug 21 #Javascript
vue组件开发之tab切换组件使用详解
Aug 21 #Javascript
vue组件开发之slider组件使用详解
Aug 21 #Javascript
Vue左滑组件slider使用详解
Aug 21 #Javascript
vue实现移动端触屏拖拽功能
Aug 21 #Javascript
vue实现移动端拖动排序
Aug 21 #Javascript
微信小程序实现聊天室
Aug 21 #Javascript
You might like
php下通过POST还是GET来传值
2008/06/05 PHP
php判断类是否存在函数class_exists用法分析
2014/11/14 PHP
php将csv文件导入到mysql数据库的方法
2014/12/24 PHP
ThinkPHP3.2.3框架Memcache缓存使用方法实例总结
2019/04/15 PHP
Laravel5框架自定义错误页面配置操作示例
2019/04/17 PHP
js利用div背景,做一个竖线的效果。
2008/11/22 Javascript
jQuery学习5 jQuery事件模型
2010/02/07 Javascript
JavaScript实现将数组中所有元素连接成一个字符串的方法
2015/04/06 Javascript
js实现同一个页面多个渐变效果的方法
2015/04/10 Javascript
javascript显示中文日期的方法
2015/06/18 Javascript
JavaScript中子对象访问父对象的方式详解
2016/09/01 Javascript
vue slots 组件的组合/分发实例
2018/09/06 Javascript
原生JS使用Canvas实现拖拽式绘图功能
2019/06/05 Javascript
ES6对象操作实例详解
2020/05/23 Javascript
js实现双色球效果
2020/08/02 Javascript
OpenLayer3自定义测量控件MeasureTool
2020/09/28 Javascript
axios封装与传参示例详解
2020/10/18 Javascript
Vue常用API、高级API的相关总结
2021/02/02 Vue.js
[42:32]Secret vs Optic 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python 实现网上商城,转账,存取款等功能的信用卡系统
2016/07/15 Python
python3使用scrapy生成csv文件代码示例
2017/12/28 Python
python 格式化输出百分号的方法
2019/01/20 Python
Ubuntu下Anaconda和Pycharm配置方法详解
2019/06/14 Python
基于python的selenium两种文件上传操作实现详解
2019/09/19 Python
python 实现检验33品种数据是否是正态分布
2019/12/09 Python
使用PyOpenGL绘制三维坐标系实例
2019/12/24 Python
Django admin 实现search_fields精确查询实例
2020/03/30 Python
英国第一豪华护肤品牌:Elemis
2017/10/12 全球购物
自我推荐书
2013/12/04 职场文书
初一体育教学反思
2014/01/29 职场文书
共产党员承诺书
2014/03/25 职场文书
乳制品整治工作方案
2014/05/29 职场文书
小学生运动会通讯稿
2014/09/23 职场文书
国家税务局领导班子对照检查材料思想汇报
2014/10/04 职场文书
护士先进个人总结
2015/02/13 职场文书
2015年女职工工作总结
2015/05/15 职场文书