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中的cookie的读写操作示例详解
Apr 17 Javascript
JavaScript中reduce()方法的使用详解
Jun 09 Javascript
jQuery封装的tab选项卡插件分享
Jun 16 Javascript
ros::spin() 和 ros::spinOnce()函数的区别及详解
Oct 01 Javascript
js获取指定字符前/后的字符串简单实例
Oct 27 Javascript
js移动焦点到最后位置的简单方法
Nov 25 Javascript
Bootstrap php制作动态分页标签
Dec 23 Javascript
bootstrap 表单验证使用方法
Jan 11 Javascript
js前端导出Excel的方法
Nov 01 Javascript
微信小程序实现文字无限轮播效果
Dec 28 Javascript
微信小程序动态显示项目倒计时
Jun 20 Javascript
Element中Slider滑块的具体使用
Jul 29 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中ob(Output Buffer 输出缓冲)函数使用方法
2007/07/21 PHP
在PHP中养成7个面向对象的好习惯
2010/07/17 PHP
php从数组中随机抽取一些元素的代码
2012/11/05 PHP
PHP中STDCLASS用法实例分析
2016/11/11 PHP
新浪中用来显示flash的函数
2007/04/02 Javascript
基于jQuery实现的扇形定时器附源码下载
2015/10/20 Javascript
vuejs动态组件给子组件传递数据的方法详解
2016/09/09 Javascript
网站申请不到支付宝接口、微信接口,免接口收款实现方式几种解决办法
2016/12/14 Javascript
基于jPlayer三分屏的制作方法
2016/12/21 Javascript
jquery dataTable 后台加载数据并分页实例代码
2017/06/07 jQuery
Vue.js简易安装和快速入门(第二课)
2017/10/17 Javascript
详解封装基础的angular4的request请求方法
2018/06/05 Javascript
vue中axios防止多次触发终止多次请求的示例代码(防抖)
2020/02/16 Javascript
vue+ESLint 配置保存 自动格式化代码
2020/03/17 Javascript
关于Python面向对象编程的知识点总结
2017/02/14 Python
Python 文件操作的详解及实例
2017/09/18 Python
K-means聚类算法介绍与利用python实现的代码示例
2017/11/13 Python
Win 10下Anaconda虚拟环境的教程
2020/05/18 Python
Python如何获取文件指定行的内容
2020/05/27 Python
python3实现语音转文字(语音识别)和文字转语音(语音合成)
2020/10/14 Python
python time()的实例用法
2020/11/03 Python
澳大利亚电子产品购物网站:Dick Smith
2017/02/02 全球购物
Lenox官网:精美的瓷器&独特的礼品
2017/02/12 全球购物
美国婚戒购物网站:Anjays Designs
2017/06/28 全球购物
goodhealth官方海外旗舰店:新西兰国民营养师
2017/12/15 全球购物
捷克鲜花配送:Florea.cz
2018/10/29 全球购物
GE设备配件:GE Appliance Parts(家电零件、配件和滤水器)
2018/11/28 全球购物
英国领先的名牌服装折扣零售商:Brown Bag Clothing
2019/01/08 全球购物
将时尚融入珠宝:Adornmonde
2019/10/17 全球购物
C#面试题
2016/05/06 面试题
校园活动策划方案
2014/06/13 职场文书
2014年大学生工作总结
2014/11/20 职场文书
公务员政审个人总结
2015/02/12 职场文书
公司员工培训管理制度
2015/08/04 职场文书
《分数乘法》教学反思
2016/02/24 职场文书
会议开幕致辞怎么写
2016/03/03 职场文书