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 ...
随机推荐
- selenium 指定滚动到某个元素
from selenium import webdriver from selenium.common.exceptions import NoSuchElementException from se ...
- SpringBoot学习路线
网上也有很多github资源,都是自己学习Spring Boot时候,自己练的代码 虽然现在最新的版本用2.1.3.RELEASE版本,以前版本的demo运行可能会遇到错误.但是有总比没有要好,不是么 ...
- 关于Java类和包的那些事
*.Java文件 问题:一个.java源文件中是否可以包括多个类(不是内部类)?有什么限制? 答案:可以有多个类,但只能有一个public的类,并且public的类名必须与文件名相一致.一个文件中可以 ...
- 力扣(LeetCode)1016. 子串能表示从 1 到 N 数字的二进制串
给定一个二进制字符串 S(一个仅由若干 '0' 和 '1' 构成的字符串)和一个正整数 N,如果对于从 1 到 N 的每个整数 X,其二进制表示都是 S 的子串,就返回 true,否则返回 false ...
- ButterKnife RadioGroup选择事件
ButterKnife 的点击事件都很清晰,在使用RadioGroup控件时的方法: <!-- 定义一组单选框 --> <RadioGroup android:id="@+ ...
- 在nodejs中的集成虹软人脸识别
==虹软官网地址==http://www.arcsoft.com.cn 在官网注册账号,并且申请人脸识别激活码, 选择SDK版本和运行系统(windows/linux/android/ios) ,我们 ...
- Mac python 环境配置
问题:mac 只带了python2.7,要想使用高版本的Python,如python3.x,只能再次安装了,这样就会遇到 两个版本的切换问题了 如下图 : 执行 which python 如下图,查看 ...
- UnityShader中的语义相关
语义简介:实际上就是一个表达参数含义的字符串. 应用阶段到顶点着色器时用常用的语义如下: POSITION:模型空间中的顶点坐标 NORMAL:模型空间中的法线方向 TANGENT:模型空间中的切线方 ...
- Transcranial magnetic stimulation (TMS)
Transcranial magnetic stimulation (TMS) Effect of Transcranial Magnetic Stimulation on Free Will Tra ...
- 20171023xlVBA递归统计WORD字数
Dim dFilePath As Object, OneKey Sub main_proc() Dim Wb As Workbook, Sht As Worksheet, Rng As Range S ...