<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. linux & zip & tar

    linux & zip & tar https://zzk.cnblogs.com/s?w=blog%3Axgqfrms%20zip # zip -r 递归 file_name.zip ...

  2. postman 断言学习

    请求 url :https://www.v2ex.com/api/nodes/show.json?name=python get请求 postman发起请求并做断言 断言: tests["B ...

  3. 【bzoj5178】[Jsoi2011]棒棒糖 主席树

    题目描述 Coffee的世界里也是有棒棒糖卖的,Coffee买了N(1≤N≤50000)只连着的.这N只棒棒糖包裹在小塑料袋中,排成一列,相邻的两只棒棒糖的塑料袋是接起来的.为了方便,我们把棒棒糖从左 ...

  4. 深入理解JVM一java堆分析

    上一节介绍了针对JVM的监控工具,包括JPS可以查看当前所有的java进程,jstack查看线程栈可以帮助你分析是否有死锁等情况,jmap可以导出java堆文件在MAT工具上进行分析等等.这些工具都非 ...

  5. Cornfields POJ - 2019(二维RMQ板题)

    就是求子矩阵中最大值与最小值的差... 板子都套不对的人.... #include <iostream> #include <cstdio> #include <sstr ...

  6. 【JavaScript】面向对象的程序设计

    一.前言        接着上一篇的内容,继续JavaScript的学习. 二.内容 属性类型 //数据属性[Configurable] —— 能否通过delete删除属性从而重新定义属性,能否修改属 ...

  7. Unity3D for VR 学习(1): 又一个新玩具 暴风魔镜 4(Android)

    2016年伊始,有了VR虚拟现实硬件设备:  暴风魔镜4–好奇者的新玩具 . 2015年下半年的朋友圈中各种VR.AR的新闻层次不穷,搞的我也心痒痒的:好歹咱也是职业的Unity3D程序员,高大上的O ...

  8. win7系统用笔记本共享wifi热点 让手机免费上网

    之前一直在用这个方法把自己的笔记本变成一个wifi热点,让手机也可以直接连wifi上网,节省网费和路由器购买费. 其实就是开启了windows 7的隐藏功能:虚拟WiFi和SoftAP(即虚拟无线AP ...

  9. 【OpenCV】特征检测器 FeatureDetector

    <SIFT原理与源码分析>系列文章索引:http://www.cnblogs.com/tianyalu/p/5467813.html OpenCV提供FeatureDetector实现特征 ...

  10. Python之数据库导入（py3.5）

    数据库版本:MySQL Python版本:3.5 之前用想用MySQLdb来着,后来发现py3.5版本不支持,现选择pymysql 现在想将数据库adidas中的表jd_comment读取至pytho ...