<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. Html5新增元素中Canvas 与内联SVG的比较！

    SVG与Canvas的区别与比较如下: svg:使用xml描述2D图形,canvas使用javascript描述2D图形. Canvas 是逐像素进行渲染的,在 canvas 中,一旦图形被绘制完成, ...

  2. 【Python】python 反射机制在实际的应用场景讲解

    剖析python语言中 "反射" 机制的本质和实际应用场景一. 前言 def s1(): print("s1是这个函数的名字!") s = "s1&q ...

  3. 【Python】python操作mysql

    pymysql模块对mysql进行 import pymysql # 创建连接 conn = pymysql.connect(host=, user='root', passwd='root', db ...

  4. bzoj2301-Problem b

    题意 \(T\le 5\times 10^4\) 次询问,每次询问 \(a,b,c,d,k\le 5\times 10^4\),求 \[ \sum _{i=a}^b\sum _{j=c}^d[gcd( ...

  5. BZOJ 2190 仪仗队(线性筛欧拉函数)

    简化题意可知,实际上题目求得是gcd(i,j)=1(i,j<=n)的数对数目. 线性筛出n大小的欧拉表,求和*2+1即可.需要特判1. # include <cstdio> # in ...

  6. 【bzoj2402】陶陶的难题II 分数规划+树链剖分+线段树+STL-vector+凸包+二分

    题目描述 输入 第一行包含一个正整数N,表示树中结点的个数.第二行包含N个正实数,第i个数表示xi (1<=xi<=10^5).第三行包含N个正实数,第i个数表示yi (1<=yi& ...

  7. BZOJ5073 小A的咒语（动态规划）

    设f[i][j][0/1]为前i位选j段时其中第i位选/不选最多能匹配到哪,转移时f[i][j][0]→f[i+1][j][0],f[i][j][1]→f[i+1][j][0],f[i][j][1]→ ...

  8. [AT2000] [agc002_f] Leftmost Ball

    题目链接 AtCoder:https://agc002.contest.atcoder.jp/tasks/agc002_f 洛谷:https://www.luogu.org/problemnew/sh ...

  9. MapReduce(三) 典型场景（一）

    一.mapreduce多job串联 1.需求 一个稍复杂点的处理逻辑往往需要多个 mapreduce 程序串联处理,多 job 的串联可以借助 mapreduce 框架的 JobControl 实现 ...

  10. ＭDK5.13新建工程步骤

    http://www.stmcu.org/module/forum/thread-600249-1-1.html 本人也是接触stm32没多久,之前用的MDK是5.1,现在用的是5.13,MDK5.0 ...