<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. Spring Boot 学习资料【m了以后看】（转）

    推荐博客: 程序员DD SpringBoot集成 liaokailin的专栏 纯洁的微笑 SpringBoot揭秘与实战 catoop的专栏 方志朋Spring Boot 专栏 简书Spring Bo ...

  2. Web模块：spring-boot-starter-web

    spring-boot-autoconfigure-1.5.1.RELEASE.jar!/org/springframework/boot/autoconfigure/web 上述jar的web包下, ...

  3. HDU4811_Ball

    又是数学题. 每次放入一个球所得到的的分数为x1+x2(x1表示左边的球中颜色的种数,x2表示右边) 其实如果一个球的数量超过了2,那么剩下的就是一个乘法了. 这个理解很简单,因为超过了2的话,说明最 ...

  4. python的N个小功能之正则匹配

    1.. 匹配任意除换行符“\n”外的字符:2.*表示匹配前一个字符0次或无限次:3.+或*后跟?表示非贪婪匹配,即尽可能少的匹配,如*?重复任意次,但尽可能少重复,惰性匹配:4. .*? 表示匹配任意 ...

  5. codeforces 1027 E. Inverse coloring (DP)

    E. Inverse Coloring time limit per test 2 seconds memory limit per test 256 megabytes input standard ...

  6. 【比赛】HNOI2018 寻宝游戏

    考试的时候就拿了30points滚粗了 听说myy对这题的倒推做法很无奈,官方题解在此 正解思路真的很巧妙,也说的很清楚了 就是分别考虑每一位,会发现题解中的那个性质,然后把询问的二进制数按照排序后的 ...

  7. 纪念一个日子QAQ

    嗯事情是这样的 今天早上考试的时候不知道为什么特别累,精神并不是很好,T1半平面交裸题  T2当时没有仔细看题,T3想了一段时间后会正解(9:30),但是好像很难写的样子啊.. 但是似乎由于模拟考并不 ...

  8. 小Z的袜子 题解报告【莫队】

    Description 作为一个生活散漫的人,小Z每天早上都要耗费很久从一堆五颜六色的袜子中找出一双来穿.终于有一天,小Z再也无法忍受这恼人的找袜子过程,于是他决定听天由命-- 具体来说,小Z把这N只 ...

  9. vs下给生成的程序（exe）加入默认的申请管理员权限

    在vs下编程时,经常会用到一些特殊的权限,尤其是管理员权限,下面是在win7下笔者亲测通过的. 下面要分两种情况: 第一种情况就是在vs2003或者以下的编译器中运行 1.准备一个manifest文件 ...

  10. poj 1185 状态压缩

    炮兵阵地 Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 27926   Accepted: 10805 Descriptio ...