JQuery进度条
需要实现效果如下图。
页面代码
<div class='progress_bar' data-color='#f66' data-per='"+list[i].percent+"' data-width='180'><span></span></div><label class='progress_bar_label'>100%</label> 第一次进入页面调用。或每次赋值或更改值时调用方法 function updataProgressBar(){ //更新进度条信息
//进度条设置
var $color=$('.progress_bar').attr('data-color'); //data-color 为进度条颜色 例#ff6600
$('.progress_bar').each(function () {
var per=$(this).attr('data-per'); //data-per 为进度条 进度值 1-100
var barWidth=$(this).attr('data-width'); //data-width 为进度条宽度 值自定义 单位自动填充px
$(this)
.find('span').css({'background' : $color , 'width' : per + '%'})
.parent().css({'width' : barWidth})
.next().text(per+'%');
})
}
JQuery进度条的更多相关文章
- 超酷jQuery进度条加载动画集合
在丰富多彩的网页世界中,进度条加载动画的形式非常多样,有利用gif图片实现的loading动画,也有利用jQuery和CSS3实现的进度加载动画,本文主要向大家介绍很多jQuery和CSS3实现的进度 ...
- 简单的jquery进度条插件LineProgressbar.js,myProgress.js
参考 http://www.lanrenzhijia.com/jquery/4121.html demo下载 <script src="js/jquery.lineProgress ...
- jQuery进度条设置
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="con ...
- Jquery 进度条集锦
http://sc.chinaz.com/tag_jiaoben/JinDuTiao.html?qq-pf-to=pcqq.group
- 基于Jquery的进度条插件(实用)
Spin.js 最喜欢这款插件了,动画图片的长度.粗细.速度和角度都可以灵活控制,想要做成什么样都可以. 源码下载 在线演示 Percentage Loader 一款轻量的 jQuery 进 ...
- struts2:上传多个文件时实现带进度条、进度详细信息的示范
上一篇文章讲了上传单个文件与上传多个文件(属性驱动)的例子.本例是上传多个文件(属性驱动),并且显示进度条.进度详细信息的示范. 在文件上传选择界面,允许用户增加.删除选择的文件,且只能上传指定类型的 ...
- jQuery文件上传插件jQuery Upload File 有上传进度条
jQuery文件上传插件jQuery Upload File 有上传进度条 jQuery文件上传插件jQuery Upload File,插件使用简单,支持单文件和多文件上传,支持文件拖拽上传,有进度 ...
- 赞!带进度条的 jQuery 文件拖放上传插件
jQuery File Uploader 是一个 jQuery 文件拖放上传插件,包括 Ajax 上传和进度条效果.作者编写这个插件的想法是要保持它非常简单,不像其他的插件,很多的标记,并提供一些 H ...
- JQuery入门——进度条
越来越觉得常规javascript已经跟不上节奏了,打算学点进阶的,从JQuery学起. JQuery是一个Javascript库,可以从JQuery.com下载,放到本地,用 <script ...
随机推荐
- CAS 是什么
CAS是英文单词Compare And Swap的缩写,翻译过来就是比较并替换. CAS机制当中使用了3个基本操作数:内存地址V,旧的预期值A,要修改的新值B. 更新一个变量的时候,只有当变量的预期值 ...
- synchronized和volatile
迄今为止,看到的最清楚的一篇: https://zhuanlan.zhihu.com/p/29866981 volatile https://zhuanlan.zhihu.com/p/34362413
- Qt访问注册表并调用子进程
在实际应用中需要在一个进程启动另外一个进程,可以将子进程的路径写入注册表中,然后主进程读取注册表中子进程路径,启动子进程,并以命令行参数的形式传入参数,启动子进程.具体实现方式如下 (1) ...
- PHP中json数组与对象的问题
在PHP后端,对于数组和对象的区分不是很大,主要用到的数组居多,而PHP提供接口时响应的一般是json数据(为什么使用json呢,总体来说就是体积小速度快).但是前端对数组对象很'敏感',所以对PHP ...
- 让 Ubuntu 16 开机自动启动 Vino Server
Vino Server 有一个问题, 如果用户没有login , 它是不会启动的. 但是,我把帐号设置从自动启动之后,Vino Server还是没有启动. 看来自动启动跟输密码启动还是有差别的. 具体 ...
- HTML第五章总结
A Chapter for <img> 前言 这一章讲了 Web 图片 format 的各自的优缺点和elements of 's attributes. Section1:Q1:How ...
- OSPF - 1,基础
1,OSPF知识点a)在OSPF中,如果是环回口宣告进OSPF,不管宣告时配置的是多少位掩码,路由器收到的都是32位.(EIGRP配了多少位就收到多少位).好处:EIGRP中,在PING包发起时如果在 ...
- android--------自定义控件 之 基本实现篇
前面简单的讲述了Android中自定义控件中的几个方法,今天通过代码来实现一个简单的案例 自定义一个扇形图 自定义控件示例: 这里先介绍继承View的方式为例 public class Circula ...
- server2008远程开端口的方法
今天在通过本地链接远程oracle数据库的时候发现了个问题,建立好连接了,可是一直没连上,后面发现是防火墙的1521的oracle端口没开启.开启的方法可以采用如下方法: 操作:开始→控制面板→Win ...
- PHP const关键字
常量是一个简单的标识符.在脚本执行期间该值不能改变(除了所谓的魔术常量,他们其实不是常量).常量默认大小写敏感.通常常量标识符总是大写的. 可以用define()函数来定义常量.在php5.3.0以后 ...