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 相关文章推荐
firebug的一个有趣现象介绍
Nov 30 Javascript
JQuery 给元素绑定click事件多次执行的解决方法
Sep 09 Javascript
浅析在javascript中创建对象的各种模式
May 06 Javascript
jquery 无限极下拉菜单的简单实例(精简浓缩版)
May 31 Javascript
需灵活掌握的Bootstrap预定义排版类 你精通吗?
Jun 20 Javascript
AngularJS 单元测试(二)详解
Sep 21 Javascript
通过BootStrap-select插件 js jQuery控制select属性变化
Jan 03 Javascript
Vue 仿百度搜索功能实现代码
Feb 16 Javascript
weex里Vuex state使用storage持久化详解
Sep 09 Javascript
JS使用Chrome浏览器实现调试线上代码
Jul 23 Javascript
javascript实现放大镜功能
Dec 09 Javascript
关于Javascript闭包与应用的详解
Apr 22 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批量更改数据库表前缀实现方法
2013/10/26 PHP
php面向对象中的魔术方法中文说明
2014/03/04 PHP
学习php设计模式 php实现状态模式
2015/12/07 PHP
PHP中header函数的用法及其注意事项详解
2016/06/13 PHP
用javascript连接access数据库的方法
2006/11/17 Javascript
jQuery中$.fn的用法示例介绍
2013/11/05 Javascript
JavaScript仿静态分页实现方法
2015/08/04 Javascript
JS+DIV+CSS实现的经典标签切换效果代码
2015/09/14 Javascript
Javascript获取统一管理的提示语(message)
2016/02/03 Javascript
使用开源工具制作网页验证码的方法
2016/10/17 Javascript
JavaScript定时器制作弹窗小广告
2017/02/05 Javascript
bootstrap模态框嵌套、tabindex属性、去除阴影的示例代码
2017/10/17 Javascript
JS动态插入脚本和插入引用外部链接脚本的方法
2018/05/21 Javascript
浅谈VUE-CLI脚手架热更新太慢的原因和解决方法
2018/09/28 Javascript
深入浅出了解Node.js Streams
2019/05/27 Javascript
如何阻止小程序遮罩层下方图层滚动
2019/09/05 Javascript
[53:15]Mineski vs iG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python数据处理实战(必看篇)
2017/06/11 Python
python实现石头剪刀布小游戏
2021/01/20 Python
Python 绘制可视化折线图
2020/07/22 Python
Python从文件中读取数据的方法步骤
2020/11/18 Python
Python爬虫实例之2021猫眼票房字体加密反爬策略(粗略版)
2021/02/22 Python
在css3中background-clip属性与background-origin属性的用法介绍
2012/11/13 HTML / CSS
捷克汽车配件和工具销售网站:TorriaCars
2018/02/26 全球购物
澳大利亚美容产品及化妆品在线:Activeskin
2020/06/03 全球购物
Linux的文件类型
2012/03/07 面试题
EJB3.1都有哪些改进
2012/11/17 面试题
审核会计岗位职责
2013/11/08 职场文书
学生期末评语大全
2014/04/30 职场文书
学校节能宣传周活动总结
2014/07/09 职场文书
2014年医院党建工作总结
2014/12/20 职场文书
电气工程师岗位职责
2015/02/12 职场文书
安全生产奖惩制度
2015/08/06 职场文书
导游词之台湾安平古堡
2019/12/25 职场文书
php远程请求CURL案例(爬虫、保存登录状态)
2021/04/01 PHP
mysql如何配置白名单访问
2021/06/30 MySQL