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

<!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. linux安装配置阿里云的yum源和python3

    一.yum源理解 yum源仓库的地址 在/etc/yum.repos.d/,并且只能读出第一层的repo文件 yum仓库的文件都是以.repo结尾的 二.下载阿里云的.repo仓库文件 ,放到/etc ...

  2. flink学习笔记-数据源(DataSource)

    说明:本文为<Flink大数据项目实战>学习笔记,想通过视频系统学习Flink这个最火爆的大数据计算框架的同学,推荐学习课程: Flink大数据项目实战:http://t.cn/EJtKh ...

  3. 收藏的一些有意思的CSS加载样式

    先看下效果 全部代码贴出,自己粘贴调试测试: <!DOCTYPE html> <html lang="en"> <head> <meta ...

  4. js 自定义属性

     html标签中有没有什么自带的属性可以存储成绩的----没有  本身html标签没有这个属性,自己(程序员)添加的,----自定义属性---为了存储一些数据  在html标签中添加的自定义属性,如果 ...

  5. 使用octave符号运算求解不定积分、微分方程等（兼容matlab）

    1.求解1/(1+cos(x))^2的不定积分. 在和学生讨论一道物理竞赛题的时候,出现了这个函数的积分求解需求.查积分表也可写出答案.但是可以使用octave的符号运算工具箱来做. syms x; ...

  6. 【算法笔记】B1011 A+B 和 C

    1011 A+B 和 C (15 分) 给定区间 [−2​31​​,2​31​​] 内的 3 个整数 A.B 和 C,请判断 A+B 是否大于 C. 输入格式: 输入第 1 行给出正整数 T (≤10 ...

  7. POJ_2456 Aggressive cows 【二分求最大化最小值】

    题目: Farmer John has built a new long barn, with N (2 <= N <= 100,000) stalls. The stalls are l ...

  8. Codeforces - 518D 概率DP初步

    #include<iostream> #include<algorithm> #include<cstdio> #include<cstring> #i ...

  9. HDU - 4699 对顶栈

    Get到了全新O(1)替代部分伸展树功能的姿势 左栈stk1维护当前信息,右栈stk2维护历史删除信息 题目求的是严格的前缀和(且小于当前指针)那就每次左栈新增时再更新前缀和信息就好 即使把题面换成最 ...

  10. self_vue@1.0.0 dev: `webpack-dev-server --inline --progress --config build/webpack.dev.conf.js`

    解决方案: 1.试一下 卸载npm uninstall webpack-dev-server,在安装这个npm i webpack-dev-server@2.9.7 2.删除node_modules目 ...