介绍一款自定义的进度条 简单看看实现效果:
http://www.sulishibaobei.com/progress/index1.html --js自定义
http://www.sulishibaobei.com/progress/index.html --h5原生
 
 
  <div class="box-nine">
<div class="progress"> <!--一整条进度条-->
<div class="progress-bar"></div> <!--进度-->
<div class="progress-circle"></div><!--控制点-->
</div>
<input type="text" value=""><!--显示进度值-->
</div>

简单的写一下样式

    .progress{
width:200px;
height:6px;
background: #cccccc;
border-radius: 6px;
position: relative;
display: inline-block;
cursor: pointer;
}
.progress .progress-bar{
width:100px;
height: 6px;
position: absolute;
background:red;
border-radius: 6px;
top:0;
}
.progress .progress-circle{
width:14px;
height:14px;
background: #ffffff;
border:1px solid #ccc;
box-shadow: 0 0 5px 0 #000 0.27;
border-radius: 50%;
position: absolute;
top:-4px;
cursor: pointer;
left:98px;
}
input[type='text']{
width:47px;
height:30px;
line-height: 30px;
}

看下简单的静态页面效果

接下来看实现

第一步:引入jquery

<script type="text/javascript" src="jquery.js"></script>

第二部:jquery

var lastX, NewX, that, thewidth = 0;
var auto = false;//控制是否可以拖动的; false表示不能拖动
$('.box-nine').on('mousedown', '.progress-circle', function(e) {
lastX = e.clientX; //鼠标按下时距离浏览器的x轴距离
e.preventDefault(); //阻止默认事件
that = $(this); //保存当前this
thewidth = that.prev().width() || $(".progress-bar").width(); // 获取当前进度的宽度,也就是红色条的宽度
auto = true; //鼠标按下的时候设置为true,允许拖动
})
$(document).on('mousemove', function (e) { //记住,这里一定要绑定在document上,防止拖动过快造成问题
if (auto) {
e.preventDefault();
NewX = e.clientX; //拖动后,重新获取鼠标距离浏览器的x轴距离
var mcs = NewX - lastX; //由mcs的值大小确定鼠标是向左滑动还是右滑动;
var differ = $(".progress").width() - $(".progress-circle").width(); //圆圈能拖动的最大距离 红色进度条的最大宽度就是整个进度条200px,而圆圈能滑动的最大距离要减去本身的宽度
if (mcs > 0) {//判断左滑还是右滑
that.prev().css('width', mcs + thewidth < differ ? mcs + thewidth : $(".progress").width()); //每拖动一次,都要加上当前红色条的宽度 红色条宽度=每次的鼠标差+ 上一次红色条宽度
that.css('left', mcs + thewidth < differ ? mcs + thewidth : differ);
} else {
that.prev().css('width', thewidth + mcs - that.width() > 0 ? thewidth + mcs - that.width() : 0);
that.css('left', thewidth + mcs - that.width() > 0 ? thewidth + mcs - that.width() : 0);
}
var val = that.prev().width();
that.parents('.box-nine').find('input').val(Math.ceil(val / 2));//实时将值显示在Input框 这里是模拟音量 0-100的值
}
})
$(document).on('mouseup', function(e) {
if(auto) {
auto = false;//鼠标松开不允许拖动
}
})
 $(".box-nine").on('click', '.progress', function(e) { //点击进度条时,进度的变化
lastX = e.clientX;
var offsetX = $(this).offset().left;
$(this).find('.progress-bar').css('width', lastX - offsetX>$(this).width()?$(this).width():lastX-offsetX);
$(this).find('.progress-circle').css('left', lastX - offsetX>$(this).width()- $(this).find('.progress-circle').width()?$(this).width()- $(this).find('.progress-circle').width():lastX-offsetX);
var val =$(this).find('.progress-bar').width();
$(this).parents('.box-nine').find('input').val(Math.ceil(val / 2));
})
1.将this存起来是防止页面不止一个进度条,且class都是同一份时,互不干扰;
 
下面来介绍html5的原生进度条,也做成上面一样的样式;
 <div class="box-one" style="position:relative;margin-top:10px;">
<progress value="" max="100"> </progress> <!--h5 进度条-->
<div class="progress-circle1"></div>
<input type="text" value=""><!--显示进度值-->
</div>
 progress{
background: #cccccc;
width:202px;
height:6px;
border:1px solid #ddd;
border-radius: 6px;
cursor: pointer;
position: relative;
margin-right:10px; }
progress::-moz-progress-bar { background: #ccc}
progress::-webkit-progress-value {
background: red;
height:6px;
border-radius: 6px 0 0 6px;
position: absolute;
top:-1px;
}
progress::-webkit-progress-bar {
background: #ccc
}
.progress-circle1{
width:14px;
height:14px;
background: #ffffff;
border:1px solid #ccc;
box-shadow: 0 0 5px 0 #000 0.27;
border-radius: 50%;
position: absolute;
top:15px;
cursor: pointer;
left:0px;
}

此样式不兼容谷歌哟;通过手动修改progress的样式

 var lastX,offset, thats,thewidth=0;
var auto=false;
$(".box-one").on('mousedown','.progress-circle1',function(e){
lastX=e.clientX;
e.preventDefault();
thats=$(this);
thewidth=thats.prev().val() || $("progress").val();
auto=true;
})
$(document).on('mousemove',function(e){
if(auto){
e.preventDefault();
newX=e.clientX;
var mcs=newX-lastX;
var differ=thats.prev().width()-thats.width();
if(mcs>0){
thats.prev().val(thewidth*2+mcs>$("progress").width()?$("progress").width()/2:(thewidth*2+mcs)/2);
thats.css('left',mcs+thewidth*2<differ?mcs+thewidth*2:differ );
}else{
thats.prev().val( thewidth+ mcs/2>0?thewidth+ mcs/2:0);
thats.css('left',thewidth*2 + mcs - thats.width()> 0 ? thewidth*2 + mcs - thats.width():0)
}
var val = thats.prev().val() || $("progress").val();
thats.parents('.box-one').find('input').val(Math.ceil(val ));//实时将值显示在Input框 这里是模拟音量 0-100的值 }
})
$(document).on('mouseup', function(e) {
if(auto) {
auto = false;//鼠标松开不允许拖动
}
})
$(".box-one").on('click', 'progress', function (e) {
that=$(this);
lastX = e.clientX;
offset = $(this).offset().left;
that.parent().find('.progress-circle1').css('left', lastX - offset>that.width() ? that.width()-$(".progress-circle1").width():lastX - offset);
that.val((lastX - offset)/2);
that.parent().find('input').val(Math.ceil((lastX - offset)/2));
})

详细代码:https://github.com/sulishibaobei/progress/tree/master

 
 
 
 

jquery自定义进度条与h5原生进度条的更多相关文章

  1. Android 高手进阶之自定义View,自定义属性(带进度的圆形进度条)

      Android 高手进阶(21)  版权声明:本文为博主原创文章,未经博主允许不得转载. 转载请注明地址:http://blog.csdn.net/xiaanming/article/detail ...

  2. 30款基于 jQuery & CSS3 的加载动画和进度条插件

    我们所生活每一天看到的新技术或新设计潮流的兴起,Web 开发正处在上升的时代.HTML5 & CSS3 技术的发展让 Web 端可以实现的功能越来越强大. 加载动画和进度条使网站更具吸引力.该 ...

  3. 我的Android进阶之旅------>Android自定义View实现带数字的进度条(NumberProgressBar)

    今天在Github上面看到一个来自于 daimajia所写的关于Android自定义View实现带数字的进度条(NumberProgressBar)的精彩案例,在这里分享给大家一起来学习学习!同时感谢 ...

  4. CodePush自定义更新弹框及下载进度条

    CodePush 热更新之自定义更新弹框及下载进度 先来几张弹框效果图 非强制更新场景 image 强制更新场景 image 更新包下载进度效果 image 核心代码 这里的热更新Modal框,是封装 ...

  5. Jquery progressbar通过Ajax请求获取后台进度演示

    项目源代码下载:http://download.csdn.net/detail/nuptboyzhb/6262253 1.简介 本文主要演示Jquery progressbar的进度条功能.js通过a ...

  6. 安卓自定义View实现图片上传进度显示(仿QQ)

    首先看下我们想要实现的效果如下图(qq聊天中发送图片时的效果): 再看下图我们实现的效果: 实现原理很简单,首先我们上传图片时需要一个进度值progress,这个不管是自己写的上传的方法还是使用第三方 ...

  7. jQuery自定义插件--banner图滚动

    前言 jQuery是一个功能强大的库,提供了开发JavaScript项目所需的所有核心函数.很多时候我们使用jQuery的原因就是因为其使用插件的功能,然而,有时候我们还是需要使用自定义代码来扩展这些 ...

  8. JQuery自定义插件详解之Banner图滚动插件

      前  言 JRedu JQuery是什么相信已经不需要详细介绍了.作为时下最火的JS库之一,JQuery将其"Write Less,Do More!"的口号发挥的极致.而帮助J ...

  9. 基于Jquery WeUI的微信开发H5页面控件的经验总结(2)

    在微信开发H5页面的时候,往往借助于WeUI或者Jquery WeUI等基础上进行界面效果的开发,由于本人喜欢在Asp.net的Web界面上使用JQuery,因此比较倾向于使用 jQuery WeUI ...

随机推荐

  1. SQL基础学习_02_查询

    SELECT语句 1. SELECT语句查询列(字段):     SELECT <列名>    FROM <表名>;     该语句使用了两个SQL子句,SELECT子句列举了 ...

  2. 横向、纵向时间轴timeline系列

    近期移动端项目用到了很多时间轴.纵向的.开始可以实现,但是不利于维护.整理下, 以作为备份留存学习参考.子元素的 标签的 :before实现圆点,:after实现边线border纵向时间轴,单一右边内 ...

  3. 【读书笔记与思考】《python数据分析与挖掘实战》-张良均

    [读书笔记与思考]<python数据分析与挖掘实战>-张良均 最近看一些机器学习相关书籍,主要是为了拓宽视野.在阅读这本书前最吸引我的地方是实战篇,我通读全书后给我印象最深的还是实战篇.基 ...

  4. 第二章:Python基础の快速认识基本数据类型和操作实战

    本课主题 字符串和操作实战 二进制操作实战 List 列表和操作实战 Tuple 元組和操作实战 Dict 字典和操作实战 作業需求 引言 这遍文章简单介绍了 Python 字符串和集合的方法和应用, ...

  5. 设计一个有getMin功能的栈(1)

    题目: 实现一个特殊的栈,在实现栈的基本功能的基础上,再实现返回栈中最小元素的操作. 要求: 1.pop.push.getMin操作的时间复杂度都是O(1) 2.设计的栈类型可以输用现成的栈结构 解答 ...

  6. .NET Core单文件发布静态编译AOT CoreRT

    .NET Core单文件发布静态编译AOT CoreRT,将.NET Core应用打包成一个可执行文件并包含运行时. 支持Windows, MacOS and Linux x64 w/ RyuJIT ...

  7. 【转载】ipcs与Linux共享内存

    一.共享内存相关知识 所谓共享内存,就是多个进程间共同地使用同一段物理内存空间,它是通过将同一段物理内存映射到不同进程的 虚拟空间来实现的.由于映射到不同进程的虚拟空间中,不同进程可以直接使用,不需要 ...

  8. 【读书笔记】【深入理解ES6】#2-字符串和正则表达式

    更好的Unicode支持 在ES6出现以前,JS字符串一直基于16位字符编码(UTF-16)进行构建. 每16位的序列是一个编码单元(code unit),代表一个字符. length.charAt( ...

  9. LeetCode第[1]题(Java):Two Sum 标签:Array

    题目: Given an array of integers, return indices of the two numbers such that they add up to a specifi ...

  10. C++返回值优化RVO

    返回值优化,是一种属于编译器的技术,它通过转换源代码和对象的创建来加快源代码的执行速度.RVO = return value optimization. 测试平台:STM32F103VG + Keil ...