JavaScript实现水平进度条拖拽效果


Posted in Javascript onJanuary 18, 2017

本文实例为大家分享水平进度条拖拽效果的js具体代码,供大家参考,具体内容如下

<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .scroll{
      margin:100px;
      width: 500px;
      height: 5px;
      background: #ccc;
      position: relative;
    }
    .bar{
      width: 10px;
      height: 20px;
      background: #369;
      position: absolute;
      top: -7px;
      left: 0;
      cursor: pointer;
    }
    .mask{
      position: absolute;
      left: 0;
      top: 0;
      background: #369;
      width: 0;
      height: 5px;
    }
  </style>  
</head>
<body>
  <div class="scroll" id="scroll">
    <div class="bar" id="bar">

    </div>
    <div class="mask" id="mask"></div>
  </div>
  <p></p>
  <script>  
    var scroll = document.getElementById('scroll');
    var bar = document.getElementById('bar');
    var mask = document.getElementById('mask');
    var ptxt = document.getElementsByTagName('p')[0];
    var barleft = 0;
    bar.onmousedown = function(event){
      var event = event || window.event;
      var leftVal = event.clientX - this.offsetLeft;
      var that = this;
       // 拖动一定写到 down 里面才可以
      document.onmousemove = function(event){
        var event = event || window.event;
        barleft = event.clientX - leftVal;     
        if(barleft < 0)
          barleft = 0;
        else if(barleft > scroll.offsetWidth - bar.offsetWidth)
          barleft = scroll.offsetWidth - bar.offsetWidth;
        mask.style.width = barleft +'px' ;
        that.style.left = barleft + "px";
        ptxt.innerHTML = "已经走了" + parseInt(barleft/(scroll.offsetWidth-bar.offsetWidth) * 100) + "%";

        //防止选择内容--当拖动鼠标过快时候,弹起鼠标,bar也会移动,修复bug
        window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
      }

    }
    document.onmouseup = function(){
      document.onmousemove = null; //弹起鼠标不做任何操作
    }
  </script>
</body>
</html>

效果图:

JavaScript实现水平进度条拖拽效果

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

Javascript 相关文章推荐
jquery 图片截取工具jquery.imagecropper.js
Apr 09 Javascript
JS 实现完美include载入实现代码
Aug 05 Javascript
javascript模拟的Ping效果代码 (Web Ping)
Mar 13 Javascript
Jquery方式获取iframe页面中的 Dom元素
May 07 Javascript
jQuery标签替换函数replaceWith()的使用例子
Aug 28 Javascript
详解win7 cmd执行vue不是内部命令的解决方法
Jul 27 Javascript
详解基于webpack2.x的vue2.x的多页面站点
Aug 21 Javascript
利用three.js画一个3D立体的正方体示例代码
Nov 19 Javascript
vue弹窗插件实战代码
Sep 08 Javascript
jQuery pagination分页示例详解
Oct 23 jQuery
vue基础之使用get、post、jsonp实现交互功能示例
Mar 12 Javascript
Node.js中console.log()输出彩色字体的方法示例
Dec 01 Javascript
原生js获取浏览器窗口及元素宽高常用方法集合
Jan 18 #Javascript
基于JavaScript实现窗口拖动效果
Jan 18 #Javascript
原生js实现节日时间倒计时功能
Jan 18 #Javascript
原生js实现返回顶部缓冲效果
Jan 18 #Javascript
详解jquery validate实现表单验证 (正则表达式)
Jan 18 #Javascript
原生js实现中奖信息无间隙滚动效果
Jan 18 #Javascript
js实现简单的网页换肤效果
Jan 18 #Javascript
You might like
外媒评选出10支2020年最受欢迎的Dota2战队
2021/03/05 DOTA
PHP静态新闻列表自动生成代码
2007/06/14 PHP
thinkphp3.2实现上传图片的控制器方法
2016/04/28 PHP
PHP重定向与伪静态区别
2017/02/19 PHP
Track Image Loading效果代码分析
2007/08/13 Javascript
extjs3 combobox取value和text案例详解
2013/02/06 Javascript
Javascript的时间戳和php的时间戳转换注意事项
2013/04/12 Javascript
javascript 实现键盘上下左右功能的小例子
2013/09/15 Javascript
ECHO.js 纯javascript轻量级延迟加载的实例代码
2016/05/24 Javascript
JS 数字转换为大写金额的简单实例
2016/08/04 Javascript
AngularJS Ajax详解及示例代码
2016/08/17 Javascript
Angularjs中ng-repeat-start与ng-repeat-end的用法实例介绍
2016/12/31 Javascript
jQuery EasyUI 选项卡面板tabs的使用实例讲解
2017/12/25 jQuery
微信公众号H5之微信分享常见错误和问题(小结)
2019/11/14 Javascript
[10:42]Team Liquid Vs Newbee
2018/06/07 DOTA
Python中的__slots__示例详解
2017/07/06 Python
Python数据结构之图的应用示例
2018/05/11 Python
Python Logging 日志记录入门学习
2018/06/02 Python
Python数据预处理之数据规范化(归一化)示例
2019/01/08 Python
3行Python代码实现图像照片抠图和换底色的方法
2019/10/10 Python
Django实现简单网页弹出警告代码
2019/11/15 Python
基于Python中isfile函数和isdir函数使用详解
2019/11/29 Python
HTML5新增的8类INPUT输入类型介绍
2015/07/06 HTML / CSS
iHerb中文官网:维生素、保健品和健康产品
2018/11/01 全球购物
空字符串(“”)和null的区别
2012/11/13 面试题
财务会计人员岗位职责
2013/11/30 职场文书
计算机专业学生求职信分享
2013/12/15 职场文书
质检部职责
2013/12/28 职场文书
写给老师的感谢信
2015/01/20 职场文书
公积金接收函格式
2015/01/30 职场文书
班委竞选稿范文
2015/11/21 职场文书
python 制作一个gui界面的翻译工具
2021/05/14 Python
Springboot/Springcloud项目集成redis进行存取的过程解析
2021/12/04 Redis
Android Flutter实现3D动画效果示例详解
2022/04/07 Java/Android
安装Windows Server 2012 R2企业版操作系统并设置好相关参数
2022/04/29 Servers
单机多实例部署 MySQL8.0.20
2022/05/15 MySQL