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

<!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. Tensorflow报错：InvalidArgumentError: You must feed a value for placeholder tensor 'input_y' with dtype

    此错误神奇之处是每次第一次运行不会报错,第二次.第三次第四次....就都报错了.关掉重启,又不报错了,运行完再运行一次立马报错!搞笑! 折磨了我半天,终于被我给解决了! 问题解决来源于这边博客:htt ...

  2. 【spring源码】bean的实例化（转载）

    首先来看一段代码,看过上一节的朋友肯定对这段代码并不陌生.这一段代码诠释了Spring加载bean的完整过程,包括读取配置文件,扫描包,加载类,实例化bean,注入bean属性依赖. 上一节介绍了Sp ...

  3. CentOS71611部署Django

    web.conf <VirtualHost *:> WSGIScriptAlias / /var/www/datacn/datacn/wsgi.py Alias /static/ /var ...

  4. 在DZ 中 showmessage 中可以再次执行 JS

    showmessage ( '登录', '', array (), array (                         'showdialog' => 0,              ...

  5. SLAM技术在国内的发展现状

    近年来,由于扫地机的出现使得SLAM技术名声大噪,如今,已在机器人.无人机.AVG等领域相继出现它的身影,今天就来跟大家聊一聊国内SLAM的发展现状. SLAM的多领域应用 SLAM应用领域广泛,按其 ...

  6. mysql sql知识总结

    SQL知识总结: 检索不同的行: SELECT DISTINCT VEND_ID FROM PRODUCTS; DISTINCT 应用于所有的列 =================== 限制结果: S ...

  7. Jquery 常用方法 及属性

    Jquery   常用方法 及属性 jQuery 事件 鼠标事件 键盘事件 表单事件 文档/窗口事件 click keypress submit load dblclick keydown chang ...

  8. 图解SQL Server 2008入门必会

    图解SQL Server 2008入门必会   https://jingyan.baidu.com/article/656db918eded1ee381249c0b.html 图解SQL Server ...

  9. CentOS 7 开放防火墙端口 命令(转载)

    CentOS 7 开放防火墙端口 命令 最近公司新的server要求用CentOS7, 发现以前CentOS 6 系列中的 iptables 相关命令不能用了,查了下,发现Centos 7使用fire ...

  10. HDU6464 (权值线段树)-（查找区间第k1小于第k2小之间的和）

    http://acm.hdu.edu.cn/showproblem.php?pid=6464 不理解先看博客:https://blog.csdn.net/g21glf/article/details/ ...