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 相关文章推荐
AngularJS快速入门
Apr 02 Javascript
JS实现样式清新的横排下拉菜单效果
Oct 09 Javascript
jquery ajax分页插件的简单实现
Jan 27 Javascript
Jquery实现遮罩层的简单实例(就是弹出DIV周围都灰色不能操作)
Jul 14 Javascript
bootstrap modal+gridview实现弹出框效果
Aug 15 Javascript
js实现加载页面就自动触发超链接的示例
Aug 31 Javascript
layui实现数据分页功能
Jul 27 Javascript
微信小程序复选框实现多选一功能过程解析
Feb 14 Javascript
vue-router 2.0 跳转之router.push()用法说明
Aug 12 Javascript
Vue 401配合Vuex防止多次弹框的案例
Nov 11 Javascript
JavaScript 判断浏览器是否是IE
Feb 19 Javascript
js正则匹配markdown里的图片标签的实现
Mar 24 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 页面编码声明方法详解(header或meta)
2010/03/12 PHP
PHP Zip解压 文件在线解压缩的函数代码
2010/05/26 PHP
PHP使用递归方式列出当前目录下所有文件的方法
2015/06/02 PHP
PHP 常用时间函数资料整理
2016/10/22 PHP
详解php语言最牛掰的Laravel框架
2017/11/20 PHP
PHPStorm 2020.1 调试 Nodejs的多种方法详解
2020/09/17 NodeJs
再次更新!MSClass (Class Of Marquee Scroll通用不间断滚动JS封装类 Ver 1.6)
2007/02/05 Javascript
基于jQuery的仿flash的广告轮播
2010/11/05 Javascript
javascript对select标签的控制(option选项/select)
2013/01/31 Javascript
Javascript级联下拉菜单以及AJAX数据验证核心代码
2013/05/10 Javascript
jquery实现效果比较好的table选中行颜色
2014/03/25 Javascript
JS模拟Dialog弹出浮动框效果代码
2015/10/16 Javascript
vuejs指令详解
2017/02/07 Javascript
Vue实现active点击切换方法
2018/03/16 Javascript
详解在网页上通过JS实现文本的语音朗读
2019/03/28 Javascript
Vue实现input宽度随文字长度自适应操作
2020/07/29 Javascript
Vue基于iview table展示图片实现点击放大
2020/08/05 Javascript
Python中的asyncio代码详解
2019/06/10 Python
python pandas生成时间列表
2019/06/29 Python
python使用ctypes调用扩展模块的实例方法
2020/01/28 Python
基于python实现把json数据转换成Excel表格
2020/05/07 Python
Python参数传递及收集机制原理解析
2020/06/05 Python
利用CSS3实现文字折纸效果实例代码
2018/07/10 HTML / CSS
详解html2canvas截图不能截取圆角图片的解决方案
2018/01/30 HTML / CSS
ALDO英国官网:加拿大女鞋品牌
2018/02/19 全球购物
JAKO-O德国野酷台湾站:德国首屈一指的婴幼童用品品牌
2019/01/14 全球购物
Dogeared官网:在美国手工制作的珠宝
2019/08/24 全球购物
澳大利亚最早和最古老的巨型游戏专家:Yardgames
2020/02/20 全球购物
美国最大和最受信任的二手轮胎商店:Bestusedtires.com
2020/06/02 全球购物
企业职业病防治方案
2014/05/29 职场文书
人力资源职位说明书
2014/07/29 职场文书
一份没有按时交货失信于客户的检讨书
2014/09/19 职场文书
2014院党委领导班子对照检查材料思想汇报
2014/09/24 职场文书
杭州西湖英语导游词
2015/02/03 职场文书
2015毕业寄语大全
2015/02/26 职场文书
Java实现字符串转为驼峰格式的方法详解
2022/07/07 Java/Android