更新时间：2021-02-03 23:26:57
更新说明：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | option配置参数 类型 说明type string 进度条类型默认loopvalue number 进度条数值background string 进度条背景颜色默认#CCCCCCcolor string 进度条颜色默认#00A0E9isText boolean 进度条文字是否显示textColor string 进度条文字颜色type为loop默认#00A0E9,type为bar默认#FFFFFFtextPosition object textPosition: {x: number,// 进度条文字中心位置X,默认为居中 y: number// 进度条文字中心位置X,默认为居中},fontSize number 进度条文字字体默认20pxfontWeight number 进度条文字加粗默认700width number 进度条宽度type为loop默认20px,type为bar默认300pxradius number 进度条半径默认60,type为loop生效deg number 进度条角度默认12点刻度,type为loop生效time number 进度条动画时间毫秒默认1000easing string 进度条动画类型默认linear,动画类型：'linear','<' 或者 'easeIn' 或者 'ease-in','>' 或者 'easeOut' 或者 'ease-out','<>' 或者'easeInOut'或者'ease-in-out','bounce' |
更新时间：2021-02-01 22:32:34
更新说明：修改为面向对象模式，可以动态修改值，以及更多配置
更新时间：2017/9/8 上午9:19:33
更新说明：修复环形进度条数字位置为水平垂直居中
1.需要引入raphael.js.
2.复制需要的函数到你的代码中调用该函数并填写参数即可，函数有两个，一个是创建环形进度条，一个是创建矩形进度条.
环形进度条 | ||
参数 | 类型 | 描述 |
el | obj | DOM对象 |
val | number | 数值（会自动附加%） |
bg | string | 进度条背景颜色 |
Color | string | 进度条颜色 |
textColor | string | 数值文字颜色 |
fontSize | string | 数值文字字体大小需要带单位（px之类的） |
size | number | 圆环的宽度 |
r | number | 圆环内半径 |
time | number | 动画时间（毫秒） |
easing | string | 动画类型： 'linear', '<' 或者 'easeIn' 或者 'ease-in', '>' 或者 'easeOut' 或者 'ease-out', '<>' 或者'easeInOut'或者'ease-in-out', 'backIn'或者 'back-in', 'backOut' 或者 'back-out', 'elastic', 'bounce' |
矩形进度条 | ||
参数 | 类型 | 描述 |
el | obj | DOM对象 |
val | number | 数值（会自动附加%） |
bg | string | 进度条背景颜色 |
color | string | 进度条颜色 |
textColor | string | 数值文字颜色 |
fontSize | string | 数值文字字体大小需要带单位（px之类的） |
lenght | Number | 进度条总长度 |
size | number | 进度条高度 |
time | number | 动画时间（毫秒） |
easing | string | 动画类型： 'linear', '<' 或者 'easeIn' 或者 'ease-in', '>' 或者 'easeOut' 或者 'ease-out', '<>' 或者'easeInOut'或者'ease-in-out', 'backIn'或者 'back-in', 'backOut' 或者 'back-out', 'elastic', 'bounce' |
特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com
- 上一个特效： 简洁实用的jQuery表单验证
- 下一个特效： HTML5灭蚊大作战小游戏