jquery自定义进度条与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));
})
<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原生进度条的更多相关文章
- Android 高手进阶之自定义View,自定义属性(带进度的圆形进度条)
Android 高手进阶(21) 版权声明:本文为博主原创文章,未经博主允许不得转载. 转载请注明地址:http://blog.csdn.net/xiaanming/article/detail ...
- 30款基于 jQuery & CSS3 的加载动画和进度条插件
我们所生活每一天看到的新技术或新设计潮流的兴起,Web 开发正处在上升的时代.HTML5 & CSS3 技术的发展让 Web 端可以实现的功能越来越强大. 加载动画和进度条使网站更具吸引力.该 ...
- 我的Android进阶之旅------>Android自定义View实现带数字的进度条(NumberProgressBar)
今天在Github上面看到一个来自于 daimajia所写的关于Android自定义View实现带数字的进度条(NumberProgressBar)的精彩案例,在这里分享给大家一起来学习学习!同时感谢 ...
- CodePush自定义更新弹框及下载进度条
CodePush 热更新之自定义更新弹框及下载进度 先来几张弹框效果图 非强制更新场景 image 强制更新场景 image 更新包下载进度效果 image 核心代码 这里的热更新Modal框,是封装 ...
- Jquery progressbar通过Ajax请求获取后台进度演示
项目源代码下载:http://download.csdn.net/detail/nuptboyzhb/6262253 1.简介 本文主要演示Jquery progressbar的进度条功能.js通过a ...
- 安卓自定义View实现图片上传进度显示(仿QQ)
首先看下我们想要实现的效果如下图(qq聊天中发送图片时的效果): 再看下图我们实现的效果: 实现原理很简单,首先我们上传图片时需要一个进度值progress,这个不管是自己写的上传的方法还是使用第三方 ...
- jQuery自定义插件--banner图滚动
前言 jQuery是一个功能强大的库,提供了开发JavaScript项目所需的所有核心函数.很多时候我们使用jQuery的原因就是因为其使用插件的功能,然而,有时候我们还是需要使用自定义代码来扩展这些 ...
- JQuery自定义插件详解之Banner图滚动插件
前 言 JRedu JQuery是什么相信已经不需要详细介绍了.作为时下最火的JS库之一,JQuery将其"Write Less,Do More!"的口号发挥的极致.而帮助J ...
- 基于Jquery WeUI的微信开发H5页面控件的经验总结(2)
在微信开发H5页面的时候,往往借助于WeUI或者Jquery WeUI等基础上进行界面效果的开发,由于本人喜欢在Asp.net的Web界面上使用JQuery,因此比较倾向于使用 jQuery WeUI ...
随机推荐
- 深入.NET数据类型(2)
一.装箱和拆箱 将值类型转换为引用类型的过程称为装箱,反之称为拆箱 实际开发尽量避免 装/拆 箱 原因: 装/拆 箱都会降低程序性能 示例代码: static void Main(string[] a ...
- js模块化规范
1. CommonJS 用于服务端模块化编程,比如nodejs就采用此规范: 一个文件就是一个模块,require方法用来加载模块,该方法读取一个文件并执行,最后返回文件内部的module.expor ...
- python利用pysvn发布lib的小程序
背景: 本人在公司的平台部门工作,我们部门写出的代码都是编译成.a文件,定期发布版本到各个产品,现在老大要求我负责每周向公司的某个产品发布lib.发布lib的步骤大概就是自动化的兄弟给我提供一个归档的 ...
- Java Web高级编程(四)
WebSocket 一.WebSocket的产生 用户希望Web页面可以进行交互,用于解决这个问题的技术是JavaScript,现在Web上有许多的可用的JavaScript框架,在使用极少的Java ...
- windows 下运行angualr/material2 项目
第一步:到github上clone angular/material2 项目 第二步:npm install 第三步: 打开git bash (cmd 或 powershell 是无法成功运行该项目 ...
- 微信终端开发团队:新年新语言,WCDB Swift
欢迎大家前往云+社区,获取更多腾讯海量技术实践干货哦~ 作者:sanhuazhang,此文发布在微信终端开发团队的专栏 WCDB 作为微信的终端数据库,从 2017.6 开源至今,共迭代了 5 个版本 ...
- android 删除相册图片并同步到图库
private void deleteImage(String imgPath) { ContentResolver resolver = getContentResolver(); Cursor c ...
- JS获取前天、昨天、今天、明天、后天的时间
GetDateStr = function(AddDayCount) { var dd = new Date(); dd.setDate(dd.getDate()+AddDayCount);//获取A ...
- 关于javascript代码优化的8点建议
前面的话 本文将详细介绍JS编程风格的几个要点 松耦合 当修改一个组件而不需要更改其他组件时,就做到了松耦合 1.将JS从CSS中抽离:不要使用CSS表达式 //不好的做法 .box{width: e ...
- python_IO编程
本篇文章将介绍python里面的I/O编程.更多内容请参考:python学习指南 I/O编程 读写文件时最常见的IO操作.Python内置了读写文件的函数,用法和C是兼容的. 读写文件前,我们必须了解 ...