<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>

效果：

原文：http://www.jb51.net/article/103461.htm

JavaScript实现水平进度条拖拽效果的更多相关文章

  1. JavaScript实现最简单的拖拽效果

    一.一些无关痛痒的唠叨 拖拽还是挺不错的一个页面效果,我个人认为,其生命力在于可以让用户自己做一些操作,所谓自定义.例如: ①浏览器标签顺序的拖拽切换 现在基本上所有的选项卡式的浏览器都有顺序拖拽切换 ...

  2. JavaScript实现网页元素的拖拽效果

    以下的页面中放了两个div,能够通过鼠标拖拽这两个元素到任何位置. watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvamFja2ZydWVk/font/5a6 ...

  3. 用JavaScript实现div的鼠标拖拽效果

    实现原理鼠标按下时根据onmousemove事件来动态获取鼠标坐标位置以此来更新div的位置,实现的前提时div要有一个定位效果,不然的话是移动不了它的. HTML <div class=&qu ...

  4. 拖拽系列一、JavaScript实现简单的拖拽效果

        前端拖拽相关应用汇总 在现实生活中就像男孩子牵着(拖着)女朋友的手穿过马路:从马路的一端走到另一端这种场景很常见: 而在前端开发中拖拽效果也算是前端开发中应用最常见.最普遍的特效:其拖拽涉及知 ...

  5. 学习笔记---Javascript事件Event、IE浏览器下的拖拽效果

    学习笔记---Javascript事件Event.IE浏览器下的拖拽效果     1. 关于event常用属性有returnValue(是否允许事件处理继续进行, false为停止继续操作).srcE ...

  6. js拖拽效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. js div浮动层拖拽效果代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. 超强的纯 CSS 鼠标点击拖拽效果

    背景 鼠标拖拽元素移动,算是一个稍微有点点复杂的交互. 而在本文,我们就将打破常规,向大家介绍一种超强的仅仅使用纯 CSS 就能够实现的鼠标点击拖拽效果. 在之前的这篇文章中 -- 不可思议的纯 CS ...

  9. jQuery的DOM操作实例（2）——拖拽效果&&拓展插件

    一.原生JavaScript编写拖拽效果 二.jQuery编写的拖拽效果 三.在jQuery中拓展一个拖拽插件

随机推荐

  1. Viewpoint Meta标签

    移动web Viewpoint常用得设置方式: [布局viewpoint] = [设备宽度] = [度量viewpoint] <meta name="viewport" co ...

  2. Hibernate 中一级缓存和快照区的理解

    刚刚开始的时候觉得这个快照区很难理解,在网上看了很多博客之后,开始明白了.我是结合 ADO.NET 理解的,在ADO.NET 中有一个类, 叫 SqlCommandBuilder,在我看来,他就是 A ...

  3. mysql 、慢查询、到底如何玩

    在项目开发中,那些开发大佬经常会写出一些SQL语句,一条糟糕的SQL语句可能让你测试的整个程序都非常慢,超过10秒的话,我觉得一般用户就会选择关闭网页,如何优化SQL语句将那些运行时间 比较长的SQL ...

  4. 第112天：javascript中函数预解析和执行阶段

    关于javascript中的函数:  1.预解析:把所有的函数定义提前,所有的变量声明提前,变量的赋值不提前  2.执行 :从上到下执行,但有例外(setTimeout,setInterval,aja ...

  5. 【bzoj3456】城市规划 容斥原理+NTT+多项式求逆

    题目描述 求出n个点的简单(无重边无自环)无向连通图数目mod 1004535809(479 * 2 ^ 21 + 1). 输入 仅一行一个整数n(<=130000) 输出 仅一行一个整数, 为 ...

  6. 【hdu6093】Rikka with Number

    多校第五場的題. 首先是一個好數只在某個進制下,不會是在兩個進制下都爲好數. 另外每個進制好數的個數爲d!-(d-1)!,因爲要保證第一位不爲0. 然後就是在臨界進制下有多少個好數的問題,可以變成兩個 ...

  7. 获取AD域中SYSVOL和组策略首选项中的密码

    这种方法是最简单的,因为不需要特殊的“黑客”工具.所有的攻击必须做的是打开Windows资源管理器,并搜索域名为SYSVOL DFS共享的XML文件.在大多数情况下,以下XML文件将包含凭据:grou ...

  8. 【CF113D】Museum

    Portal --> cf113D Solution 额题意的话大概就是给一个无向图然后两个人给两个出发点,每个点每分钟有\(p[i]\)的概率停留,问这两个人在每个点相遇的概率是多少 如果说我 ...

  9. Linux用户创建及权限管理

    作业一: 1,新建用户natasha,uid为1000,gid为555,备注信息为“master” useradd natasha            vim /etc/passwd         ...

  10. web系统中上下移动功能的实现

    其实上移下移的思想分几步: 核心思想:交换两个记录的位置字段的值. 问题:如何根据当前记录,找到前一个或者后一个的记录的位置. 第一:在java类属性定义一个position位置字段,不同的位置pos ...