需要实现效果如下图。

页面代码
<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. selenium 指定滚动到某个元素

    from selenium import webdriver from selenium.common.exceptions import NoSuchElementException from se ...

  2. SpringBoot学习路线

    网上也有很多github资源,都是自己学习Spring Boot时候,自己练的代码 虽然现在最新的版本用2.1.3.RELEASE版本,以前版本的demo运行可能会遇到错误.但是有总比没有要好,不是么 ...

  3. 关于Java类和包的那些事

    *.Java文件 问题:一个.java源文件中是否可以包括多个类(不是内部类)?有什么限制? 答案:可以有多个类,但只能有一个public的类,并且public的类名必须与文件名相一致.一个文件中可以 ...

  4. 力扣(LeetCode)1016. 子串能表示从 1 到 N 数字的二进制串

    给定一个二进制字符串 S(一个仅由若干 '0' 和 '1' 构成的字符串)和一个正整数 N,如果对于从 1 到 N 的每个整数 X,其二进制表示都是 S 的子串,就返回 true,否则返回 false ...

  5. ButterKnife RadioGroup选择事件

    ButterKnife 的点击事件都很清晰,在使用RadioGroup控件时的方法: <!-- 定义一组单选框 --> <RadioGroup android:id="@+ ...

  6. 在nodejs中的集成虹软人脸识别

    ==虹软官网地址==http://www.arcsoft.com.cn 在官网注册账号,并且申请人脸识别激活码, 选择SDK版本和运行系统(windows/linux/android/ios) ,我们 ...

  7. Mac python 环境配置

    问题:mac 只带了python2.7,要想使用高版本的Python,如python3.x,只能再次安装了,这样就会遇到 两个版本的切换问题了 如下图 : 执行 which python 如下图,查看 ...

  8. UnityShader中的语义相关

    语义简介:实际上就是一个表达参数含义的字符串. 应用阶段到顶点着色器时用常用的语义如下: POSITION:模型空间中的顶点坐标 NORMAL:模型空间中的法线方向 TANGENT:模型空间中的切线方 ...

  9. Transcranial magnetic stimulation (TMS)

    Transcranial magnetic stimulation (TMS) Effect of Transcranial Magnetic Stimulation on Free Will Tra ...

  10. 20171023xlVBA递归统计WORD字数

    Dim dFilePath As Object, OneKey Sub main_proc() Dim Wb As Workbook, Sht As Worksheet, Rng As Range S ...