总结：拖动显示进度的进度条

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>demo</title>

<style>

body{margin:0;padding:0;font-size:12px;}

.scale_panel{color:#999;width:200px;position:absolute;line-height:18px;left:60px;top:-0px;}

.scale_panel .r{float:right;}

.scale span{background:url(images/scroll.gif) no-repeat;width:8px;height:16px;position:absolute;left:-2px;top:-5px;cursor:pointer;}

.scale{ background-repeat: repeat-x; background-position: 0 100%; background-color: #E4E4E4; border-left: 1px #83BBD9 solid;  width: 200px; height: 3px; position: relative; font-size: 0px; border-radius: 3px; }

.scale div{ background-repeat: repeat-x; background-color: #3BE3FF; width: 0px; position: absolute; height: 3px; width: 0; left: 0; bottom: 0; }

.lanren li{font-size:12px;line-height:50px;position:relative;height:50px;list-style:none;}

</style>

</head>

<body>

<!-- 代码部分begin -->

<ul class="lanren">

    <li>

        <div class="scale_panel">

        <span id="title">0</span>

            <div class="scale" id="bar">

                <div></div>

                <span id="btn"></span>

            </div>

        </div>

    </li>

</ul>

<script>

var scale = function (btn,bar,title){

    this.btn=document.getElementById(btn);

    this.bar=document.getElementById(bar);

    this.title=document.getElementById(title);

    this.step=this.bar.getElementsByTagName("div")[0];

    this.init();

};

scale.prototype={

    init:function (){

        var f=this,g=document,b=window,m=Math;

        f.btn.onmousedown=function (e){

            var x=(e||b.event).clientX;

            var l=this.offsetLeft;

            var max=f.bar.offsetWidth-this.offsetWidth;

            g.onmousemove=function (e){

                var thisX=(e||b.event).clientX;

                var to=m.min(max,m.max(-2,l+(thisX-x)));

                f.btn.style.left=to+'px';

                f.ondrag(m.round(m.max(0,to/max)*100),to);

                b.getSelection ? b.getSelection().removeAllRanges() : g.selection.empty();

            };

            g.onmouseup=new Function('this.onmousemove=null');

        };

    },

    ondrag:function (pos,x){

        this.step.style.width=Math.max(0,x)+'px';

        this.title.innerHTML=pos+'%';

    }

}

new scale('btn','bar','title');

</script>

<!-- 代码部分end -->

</body>

</html>

还有一个gif按钮的图片。就是它-----》

哈哈哈

html5可拖动的进度条的更多相关文章

  1. 使用原生JS+CSS或HTML5实现简单的进度条和滑动条效果（精问）

    使用原生JS+CSS或HTML5实现简单的进度条和滑动条效果(精问) 一.总结 一句话总结:进度条动画效果用animation,自动效果用setIntelval 二.使用原生JS+CSS或HTML5实 ...

  2. 基于HT for Web矢量实现HTML5文件上传进度条

    在HTML中,在文件上传的过程中,很多情况都是没有任何的提示,这在体验上很不好,用户都不知道到时有没有在上传.上传成功了没有,所以今天给大家介绍的内容是通过HT for Web矢量来实现HTML5文件 ...

  3. 【JavaScript】HTML5/CSS3实现五彩进度条应用

    今天要介绍的是一款基于HTML5和CSS3的进度条应用,这款进度条是静态的,仅提供进度条的五彩外观.当然你可以在CSS中动态设置进度值来让其变得动态,一个很好的实现方式是利用jQuery动态改变CSS ...

  4. HTML5/CSS3实现五彩进度条应用

    今天要介绍的是一款基于HTML5和CSS3的进度条应用,这款进度条是静态的,仅提供进度条的五彩外观.当然你可以在CSS中动态设置进度值来让其变得动态,一个很好的实现方式是利用jQuery动态改变CSS ...

  5. html5 canvas绘制环形进度条，环形渐变色仪表图

    html5 canvas绘制环形进度条,环形渐变色仪表图                                             在绘制圆环前,我们需要知道canvas arc() 方 ...

  6. ajax利用html5新特性带进度条上传文件

    http://blog.csdn.net/pkgray/article/details/27591283 http://www.matlus.com/html5-file-upload-with-pr ...

  7. 【Android】 修复ijkPlayer进行m3u8 hls流播放时seek进度条拖动不准确的问题

    项目中使用的播放器是ijkPlayer,发现播放切片特点的hls流(m3u8格式的视频)拖动seekBar的时候会莫名的跳转或者seek不到准确的位置,发现网友也遇到了同样的问题,ijk的开发者也说明 ...

  8. HTML5矢量实现文件上传进度条

    在HTML中,在文件上传的过程中,很多情况都是没有任何的提示,这在体验上很不好,用户都不知道到时有没有在上传.上传成功了没有,所以今天给大家介绍的内容是通过HT for Web矢量来实现HTML5文件 ...

  9. 简直要逆天！超炫的 HTML5 粒子效果进度条

    我喜欢粒子效果作品,特别是那些能够应用于实际的,例如这个由 Jack Rugile 基于 HTML5 Cavnas 编写的进度条效果.看着这么炫的 Loading 效果,即使让我多等一会也无妨:)你呢 ...

随机推荐

  1. conda install 安装太慢怎么办？

    小编我在安装tensorflow和keras的过程中,安装进程太慢,小木棍一直在转圈...抓狂... 如何解决??? 使用清华提供的anaconda镜像,使用以后真的很快! Anaconda 镜像使用 ...

  2. yum及RPM安装

    yum及RPM安装 基本说明: 1.yum相当于windows上面的360软件中心 2.yum是redhat系列发行版的软件安装命令 debian系统用的是apt-get 3.yum安装软件的来源得存 ...

  3. Android Gradle 隐形依赖的奇怪案例

    相信 Android 开发者都有在 Android Studio 中升级 compileSdkVersion 的经历,这个时候如果你使用了 support 包,并同时升级,那么可能会出现一个错误提示. ...

  4. location的属性

    http://localhost:8080/?a=b#/login location.host "localhost:8080" location.port 8080 locati ...

  5. day--42 前端基础小结

    前端基础总结 一:前端实现的原理: 小实例: 01:第一步:创建一个socket服务端: import socket server=socket.socket() ip_port=("127 ...

  6. POJ_2010 Moo University - Financial Aid 【堆预处理】

    一.题面 POJ2010 二.分析 堆预处理 首先可以考虑吧随便取一个点,判断两侧的最小的总费用是多少,然后相加判断是否满足条件.如果直接判断会超时,所以需要用大根堆预处理一下.先看从分数最小的往最大 ...

  7. python学习12-反射 判断函数与方法（转载）

    一.三个内置函数 1.issubclass(a, b)  判断a类是否是b类的子类 class Foo: pass class Zi(Foo): pass class Sun(Zi): passpri ...

  8. RedisClient 连接redis 提示 ERR Client sent AUTH, but no password is set

  9. oracle 笔记---(六)__表空间

    查看表空间的大小 select tablespace_name,block_size,contents from dba_tablespaces; 查看表空间对应的数据文件 select file_n ...

  10. (转)Nginx静态服务配置---详解root和alias指令

    Nginx静态服务配置---详解root和alias指令 原文:https://www.jianshu.com/p/4be0d5882ec5 静态文件 Nginx以其高性能著称,常用与做前端反向代理服 ...