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组件的一些写法
Sep 10 Javascript
form表单action提交的js部分与html部分
Jan 07 Javascript
JS实现鼠标滑过折叠与展开菜单效果代码
Sep 06 Javascript
jQuery+Ajax+PHP弹出层异步登录效果(附源码下载)
May 27 Javascript
深入理解Javascript中的自执行匿名函数
Jun 03 Javascript
jQuery实现根据滚动条位置加载相应内容功能
Jul 18 Javascript
前端面试题及答案整理(二)
Aug 26 Javascript
jQuery实现的购物车物品数量加减功能代码
Nov 16 Javascript
Vue概念及常见命令介绍(1)
Dec 08 Javascript
vue2.0全局组件之pdf详解
Jun 26 Javascript
JavaScript原型式继承实现方法
Nov 06 Javascript
Vue中 axios delete请求参数操作
Aug 25 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调用nginx的mod_zip模块打包ZIP文件
2014/06/11 PHP
jQuery实现原理的模拟代码 -6 代码下载
2010/08/16 Javascript
js获取某元素的class里面的css属性值代码
2014/01/16 Javascript
Jquery实现自定义弹窗示例
2014/03/12 Javascript
jquery禁止回车触发表单提交
2014/12/12 Javascript
js与jquery回车提交的方法
2015/02/03 Javascript
JavaScript使用Prototype实现面向对象的方法
2015/04/14 Javascript
Bootstrap3 Grid system原理及应用详解
2016/09/30 Javascript
微信小程序 textarea 详解及简单使用方法
2016/12/05 Javascript
ReactNative页面跳转Navigator实现的示例代码
2017/08/02 Javascript
基于node.js的fs核心模块读写文件操作(实例讲解)
2017/09/10 Javascript
详解js删除数组中的指定元素
2018/10/31 Javascript
Element Steps步骤条的使用方法
2020/07/26 Javascript
[45:16]完美世界DOTA2联赛循环赛 IO vs FTD BO2第二场 11.05
2020/11/06 DOTA
python求众数问题实例
2014/09/26 Python
python使用mysql数据库示例代码
2017/05/21 Python
你眼中的Python大牛 应该都有这份书单
2017/10/31 Python
python3中os.path模块下常用的用法总结【推荐】
2018/09/16 Python
Python魔法方法功能与用法简介
2019/04/04 Python
Python中psutil的介绍与用法
2019/05/02 Python
Python开发之Nginx+uWSGI+virtualenv多项目部署教程
2019/05/13 Python
Keras 中Leaky ReLU等高级激活函数的用法
2020/07/05 Python
新加坡时尚网上购物:Zalora新加坡
2016/07/26 全球购物
Club Monaco加拿大官网:设计师男女服装
2019/09/29 全球购物
Linux面试经常问的文件系统操作命令
2016/10/04 面试题
生物化工专业个人自荐信
2013/09/26 职场文书
村官工作鉴定评语
2014/01/27 职场文书
小学新教师培训方案
2014/02/03 职场文书
家长对孩子的感言
2014/03/10 职场文书
药剂专业毕业生求职信
2014/06/24 职场文书
六年级小学生评语
2014/12/26 职场文书
学生检讨书范文
2015/01/27 职场文书
感动中国何玥观后感
2015/06/02 职场文书
大学校园招聘会感想
2015/08/10 职场文书
Win2008系统搭建DHCP服务器
2022/06/25 Servers
CSS 鼠标选中文字后改变背景色的实现代码
2023/05/21 HTML / CSS