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

<!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. { "result": null, "log_id": 304592860300941982, "error_msg": "image check fail", "cached": 0, "error_code": 222203, "timestamp": 1556030094 }

    这个是人脸识别时无法检测到图片报的错,有时候我们检测一张图片是否在库里面,当一张图片明显在里面,还检测不到,如下面是我的代码 package Test1; import java.io.IOExcep ...

  2. Mysql导入数据时-data truncated for column..

    在导入Mysql数据库时,发现怎么也导入不进去数据,报错: 查看表定义结构:可以看到comm 定义类型为double类型 原来是因为数据库文件中: 7369    smith    clerk     ...

  3. 2. C/C++笔试面试经典题目二

    1. C和C++中struct有什么区别? [参考答案] [解析]C中的struct没有保护行为,没有public,private,protected,内部不能有函数,但可以有函数指针. 2. C++ ...

  4. HDU-1431-素数回文（暴力打表）

    素数回文 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Submi ...

  5. django bug 与陷阱

    环境:ubuntu,python3.4 1.QueryDict 陷阱 :以下语句语句是取每行的头元素,其中line应该是一个列表.问题是,line在实际运行中已经不是列表,而变成了列表中的头元素. 错 ...

  6. Java 实现手机发送短信验证码

    Java 实现手机发送短信验证码 采用引入第三方工具的方式,网上查了半天,发现简单的实现方式便是注册一个中国网建的账号,新建账号的时候会附带赠几条免费短信,彩信 ,之后想要在使用就得花钱了.简单的操作 ...

  7. <!-- -->是HTML的注释标签js，css注释

    <!-- -->是HTML的注释标签 js,css:单行注释以 // 开头. 多行注释以 /* 开始,以 */ 结尾. web大作业(Vip视频解析) <!-- 这个网页是vip视频 ...

  8. [HAOI2015]按位或（FWT）

    [Luogu3175] [BZOJ4036] [DarkBZOJ没有spj] 原理-shadowice 本题题解 我们要求的,实际上是一个集合\(n\)个\(1\)中最晚出现的\(1\)的期望时间 显 ...

  9. 【算法笔记】B1015 德才论

    1015 德才论 (25 分) 宋代史学家司马光在<资治通鉴>中有一段著名的“德才论”:“是故才德全尽谓之圣人,才德兼亡谓之愚人,德胜才谓之君子,才胜德谓之小人.凡取人之术,苟不得圣人,君 ...

  10. ASP.NET中MD5的加密方式很简单

    在ASP.NET中MD5的加密方式很简单,代码如下: FormsAuthentication.HashPasswordForStoringInConfigFile(str, "MD5&quo ...