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 相关文章推荐
一段非常简单的让图片自动切换js代码
Nov 10 Javascript
模拟用户操作Input元素,不会触发相应事件
May 11 Javascript
一个很酷的拖动层的js类,兼容IE及Firefox
Jun 23 Javascript
js实现表单检测及表单提示的方法
Aug 14 Javascript
jquery分页插件jquery.pagination.js使用方法解析
Apr 01 Javascript
jQuery Mobile框架中的表单组件基础使用教程
May 17 Javascript
用vue和node写的简易购物车实现
Apr 25 Javascript
基于Vue-Cli 打包自动生成/抽离相关配置文件的实现方法
Dec 09 Javascript
ES6知识点整理之数组解构和字符串解构的应用示例
Apr 17 Javascript
ElementUI多个子组件表单的校验管理实现
Nov 07 Javascript
使用Node.js实现base64和png文件相互转换的方法
Mar 11 Javascript
前端JavaScript大管家 package.json
Nov 02 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
PHP面向对象——访问修饰符介绍
2012/11/08 PHP
Zend的MVC机制使用分析(一)
2013/05/02 PHP
使用php计算排列组合的方法
2013/11/13 PHP
学习PHP Cookie处理函数
2016/08/09 PHP
laravel使用Faker数据填充的实现方法
2019/04/12 PHP
js模拟点击事件实现代码
2012/11/06 Javascript
表单类各种类型(文本框)失去焦点效果jquery代码
2013/04/26 Javascript
通过遮罩层实现浮层DIV登录的js代码
2014/02/07 Javascript
JavaScript异步回调的Promise模式封装实例
2014/06/07 Javascript
Jquery网页内滑动缓冲导航的实现代码
2015/04/05 Javascript
js由下向上不断上升冒气泡效果实例
2015/05/07 Javascript
jQuery横向擦除焦点图特效代码分享
2015/09/06 Javascript
实践中学习AngularJS表单
2016/03/21 Javascript
java中String类型变量的赋值问题介绍
2016/03/23 Javascript
bootstrap switch开关组件使用方法详解
2017/08/22 Javascript
如何实现双向绑定mvvm的原理实现
2019/05/28 Javascript
微信小程序通过websocket实时语音识别的实现代码
2020/08/19 Javascript
详解Typescript里的This的使用方法
2021/01/08 Javascript
[40:55]Liquid vs LGD 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python正则抓取网易新闻的方法示例
2017/04/21 Python
基于Python闭包及其作用域详解
2017/08/28 Python
用 Python 连接 MySQL 的几种方式详解
2018/04/04 Python
python3+PyQt5自定义视图详解
2018/04/24 Python
Python os.rename() 重命名目录和文件的示例
2018/10/25 Python
对Python random模块打乱数组顺序的实例讲解
2018/11/08 Python
520使用Python实现“我爱你”表白
2020/05/20 Python
浅析与CSS3的loading动画加载相关的transition优化
2015/05/18 HTML / CSS
护理自荐信
2013/10/22 职场文书
接待员岗位责任制
2014/02/10 职场文书
信用卡工资证明格式
2014/09/13 职场文书
优秀护士事迹材料
2014/12/25 职场文书
社区六一儿童节活动总结
2015/02/11 职场文书
办公室主任岗位职责范本
2015/03/31 职场文书
2015年污水处理厂工作总结
2015/05/26 职场文书
建国大业观后感800字
2015/06/01 职场文书
nginx结合openssl实现https的方法
2021/07/25 Servers