需要实现效果如下图。

页面代码
<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进度条的更多相关文章

  1. 超酷jQuery进度条加载动画集合

    在丰富多彩的网页世界中,进度条加载动画的形式非常多样,有利用gif图片实现的loading动画,也有利用jQuery和CSS3实现的进度加载动画,本文主要向大家介绍很多jQuery和CSS3实现的进度 ...

  2. 简单的jquery进度条插件LineProgressbar.js,myProgress.js

    参考   http://www.lanrenzhijia.com/jquery/4121.html demo下载 <script src="js/jquery.lineProgress ...

  3. jQuery进度条设置

    <!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="con ...

  4. Jquery 进度条集锦

    http://sc.chinaz.com/tag_jiaoben/JinDuTiao.html?qq-pf-to=pcqq.group

  5. 基于Jquery的进度条插件(实用)

    Spin.js 最喜欢这款插件了,动画图片的长度.粗细.速度和角度都可以灵活控制,想要做成什么样都可以. 源码下载    在线演示   Percentage Loader 一款轻量的 jQuery 进 ...

  6. struts2:上传多个文件时实现带进度条、进度详细信息的示范

    上一篇文章讲了上传单个文件与上传多个文件(属性驱动)的例子.本例是上传多个文件(属性驱动),并且显示进度条.进度详细信息的示范. 在文件上传选择界面,允许用户增加.删除选择的文件,且只能上传指定类型的 ...

  7. jQuery文件上传插件jQuery Upload File 有上传进度条

    jQuery文件上传插件jQuery Upload File 有上传进度条 jQuery文件上传插件jQuery Upload File,插件使用简单,支持单文件和多文件上传,支持文件拖拽上传,有进度 ...

  8. 赞!带进度条的 jQuery 文件拖放上传插件

    jQuery File Uploader 是一个 jQuery 文件拖放上传插件,包括 Ajax 上传和进度条效果.作者编写这个插件的想法是要保持它非常简单,不像其他的插件,很多的标记,并提供一些 H ...

  9. JQuery入门——进度条

    越来越觉得常规javascript已经跟不上节奏了,打算学点进阶的,从JQuery学起. JQuery是一个Javascript库,可以从JQuery.com下载,放到本地,用 <script ...

随机推荐

  1. CAS 是什么

    CAS是英文单词Compare And Swap的缩写,翻译过来就是比较并替换. CAS机制当中使用了3个基本操作数:内存地址V,旧的预期值A,要修改的新值B. 更新一个变量的时候,只有当变量的预期值 ...

  2. synchronized和volatile

    迄今为止,看到的最清楚的一篇: https://zhuanlan.zhihu.com/p/29866981 volatile https://zhuanlan.zhihu.com/p/34362413

  3. Qt访问注册表并调用子进程

    在实际应用中需要在一个进程启动另外一个进程,可以将子进程的路径写入注册表中,然后主进程读取注册表中子进程路径,启动子进程,并以命令行参数的形式传入参数,启动子进程.具体实现方式如下 (1)      ...

  4. PHP中json数组与对象的问题

    在PHP后端,对于数组和对象的区分不是很大,主要用到的数组居多,而PHP提供接口时响应的一般是json数据(为什么使用json呢,总体来说就是体积小速度快).但是前端对数组对象很'敏感',所以对PHP ...

  5. 让 Ubuntu 16 开机自动启动 Vino Server

    Vino Server 有一个问题, 如果用户没有login , 它是不会启动的. 但是,我把帐号设置从自动启动之后,Vino Server还是没有启动. 看来自动启动跟输密码启动还是有差别的. 具体 ...

  6. HTML第五章总结

    A Chapter for <img> 前言 这一章讲了 Web 图片 format 的各自的优缺点和elements of 's attributes. Section1:Q1:How ...

  7. OSPF - 1,基础

    1,OSPF知识点a)在OSPF中,如果是环回口宣告进OSPF,不管宣告时配置的是多少位掩码,路由器收到的都是32位.(EIGRP配了多少位就收到多少位).好处:EIGRP中,在PING包发起时如果在 ...

  8. android--------自定义控件 之 基本实现篇

    前面简单的讲述了Android中自定义控件中的几个方法,今天通过代码来实现一个简单的案例 自定义一个扇形图 自定义控件示例: 这里先介绍继承View的方式为例 public class Circula ...

  9. server2008远程开端口的方法

    今天在通过本地链接远程oracle数据库的时候发现了个问题,建立好连接了,可是一直没连上,后面发现是防火墙的1521的oracle端口没开启.开启的方法可以采用如下方法: 操作:开始→控制面板→Win ...

  10. PHP const关键字

    常量是一个简单的标识符.在脚本执行期间该值不能改变(除了所谓的魔术常量,他们其实不是常量).常量默认大小写敏感.通常常量标识符总是大写的. 可以用define()函数来定义常量.在php5.3.0以后 ...