<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. ARP(Adress Resolution Protocol): 地址解析协议

    地址解析协议(Address Resolution Protoclol),其基本功能为通过目标设备的IP地址,查询目标设备的MAC地址,以保证通信的顺利.它是IPV4中网络层必不可少的协议.不过在IP ...

  2. 【ASP.NET Core】ASP.NET Core 依赖注入

    一.什么是依赖注入(Denpendency Injection) 这也是个老身常谈的问题,到底依赖注入是什么? 为什么要用它? 初学者特别容易对控制反转IOC(Iversion of Control) ...

  3. 【Django】Django迁移数据库

    我们已经编写了博客数据库模型的代码,但那还只是 Python 代码而已,Django 还没有把它翻译成数据库语言,因此实际上这些数据库表还没有真正的在数据库中创建 为了让 Django 完成翻译,创建 ...

  4. 打印实例对象的名字 默认调用父类的toString 可重写

  5. 从原理上搞定编码（二）-- Web编码

    周末宅在家里睡完觉就吃饭,吃完饭接着睡觉,这日子过的实在是没劲啊.明明还有计划中的事情没有做, 为什么就是不想去做呢,这样的生活持续下去,必然会成为一个彻头彻尾的loser.上一篇写的 初识编码 ,这 ...

  6. libiop通讯流程和api讲解

    上一篇讲到了libiop基本结构,这次根据libiop提供的test跟踪下消息和运行流程 void echo_server_test() { ; iop_base_t *); printf(" ...

  7. lightoj 1215

    lightoj 1215 Finding LCM 链接:http://www.lightoj.com/volume_showproblem.php?problem=1215 题意:已知 a, b, l ...

  8. 手脱Aspack变形壳1

    1.载入PEID Aspack v2.12 -> www.aspack.com 2.载入OD,不管是看查壳信息还是看入口特征都跟我上一次发的一个手脱Aspack v2.12的帖子相同http:/ ...

  9. css等比例分割父级容器（完美三等分）

    html部分代码: 方法一: 浮动布局+百分比 (将子元素依次左浮动,根据子元素的个数,设定每个子元素的宽度百分比) 方法二:行内元素(inline-block)+百分比 方法三: 父元素  disp ...

  10. URL参数带加号“+”AJAX传值失败的解决方法

    URL中参数的值有加号,虽然请求的URL中含有加号,但是GET的时候却得不到加号! 解决办法,用JavaScript的encodeURIComponent函数对加号进行编码. 如str="a ...