jQuery进度条插件JQMeter的简单使用
jQMeter是一款简单使用的轻量级进度条jQuery插件
效果图:该效果时设置了进度条宽度,高度,动画时间,计数时间,宽度,高度
使用过程
1.需要引入的js文件
基于jQuery的:<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
jQMeter的:<script type="text/javascript" src="jqmeter.js"></script>
JQMeter的js文件拷贝网址: http://www.gerardolarios.com/plugins-and-tools/jqmeter/
jQuery的js文件是从CDN中加载的
(为了方便,html文件和js文件是放在同一个目录下,好一点的结构可以将js文件放在另外单独建的js文件夹中)
2.html中写一个空div,设置id: <div id="jqmeter-container"></div>
3.在js中初始化进度条:
$(function(){
$('#jqmeter-container').jQMeter({
goal:'1000',//进度条总长度(指的是进度),必须的参数
raised:'400',//进度条当前进度,必须的参数
width:'200px',//显示的进度条的宽度
height:'50px',//显示的进度条的宽度
animationSpeed:2000,//进度条动画的时间
counterSpeed:3000,//进度条计数的时间
});
})
这个一个比较简单的使用,更详细的一些学习可以参考网站:http://www.jq22.com/jquery-info5283
网站中会有插件的其他参数的介绍,垂直的进度条本人没有使用成功
所有代码截图:
jQuery进度条插件JQMeter的简单使用相关推荐
- jq画布插件_超炫HTML 5开发的jQuery进度条插件
今天我们分享一个超酷的使用HTML5画布技术开发的进度条插件 - percentageloader.这个插件比普通的水平进度条使用更加炫酷的效果,图形效果类似以前我们介绍的jQuery knob插件 ...
- jQuery进度条插件rangeSlider,带刻度,rangeSlider实现进度范围选择案例
使用方法: 1.引入css <link rel="stylesheet" href="../../resources/js/plugins/ion.rangeSli ...
- 8款效果精美的 jQuery 加载动画和进度条插件
加载动画和进度条在网站和 Web 应用中的使用非常流行.虽然网速越来越快,但是我们的网站越来越复杂,同时用户对网站的使用体验的要求也越来越高.在内容加载缓慢的时候,使用时尚的加载动画和进度条告诉用户还 ...
- php进度条插件,分享8款优秀的 jQuery 加载动画和进度条插件_jquery
加载动画和进度条在网站和 Web 应用中的使用非常流行.虽然网速越来越快,但是我们的网站越来越复杂,同时用户对网站的使用体验的要求也越来越高.在内容加载缓慢的时候,使用时尚的加载动画和进度条告诉用户还 ...
- 超酷jQuery进度条加载动画集合
在丰富多彩的网页世界中,进度条加载动画的形式非常多样,有利用gif图片实现的loading动画,也有利用jQuery和CSS3实现的进度加载动画,本文主要向大家介绍很多jQuery和CSS3实现的进度 ...
- html 可调节进度条控件,jQuery简单实用的轻量级进度条插件
jQMeter是一款简单实用的轻量级进度条jQuery插件,它可以显示为水平或垂直进度条,进度条加载时带有动画特效,你只需要简单的传入一些参数到jQMeter对象的构造函数中就可以完成你想要的进度条效 ...
- php jquery进度条,如何实现jQuery进度条效果
通过jQMeter.js插件可以简单的实现jQuery进度条效果,并且可以自定义它的样式 实现jQuery进度条效果需要外部引入一个jQuery插件jQMeter.js.它是一款简单实用的轻量级进度条 ...
- get几个小技能:轮播图插件、进度条插件、筛选过滤插件
最近参加了一个网页设计大赛,趁这个机会做了一个个人简历的网页:点击欣赏 用到了许多有趣的东西们今天分享一下. 轮播图插件 Swiper轮播图插件 Swiper 的结构和基础原理 Swiper 的每个展 ...
- 04.tooltip提示框插件,linkbutton按钮插件与progressbar进度条插件
tooltip提示框插件 1 渲染方式 2 属性 3 事件 4 方法 linkbutton按钮插件 21 渲染方式 22 属性 23 方法 progressbar进度条插件 1 渲染方式 2 属性 3 ...
最新文章
- Windows Performance Toolkit
- 《OpenSSL3.0学习之一 加密库简介|CSDN创作打卡》
- 产品设计体会(9000)人人都是产品经理,系列说明
- 判断能被N整除的字符串
- 【LSB】图片隐写文档大纲
- flask框架+mysql数据库并与前台数据交互
- mysql unsigned 溢出_mysql unsigned 用法及相减出现补数溢出解决方法 | 学步园
- 编程之美:寻找发帖水王 扩展
- 非常实用的面试题,也可以当作学习资料(转载)
- Kubuntu中搜狗拼音输入法候选框乱码问题解决
- 433M、2.4G无线模块
- 计算机控制PIO,win10系统把硬盘pio模式改成dMA模式的设置教程
- BAT都怎么泡区块链?假醉网易,炮灰百度,闷骚腾讯,假正经阿里
- Vue 中监控 img 加载完毕事件
- Neo4j 图数据库高级应用系列 / 服务器扩展指南 APOC 8.8 - 图生成 完全图
- zabbix-邮件报警配置
- precision与Recall
- CPU使用率过高问题排查及Linux之top命令用法详解
- Android中的阿里云仓库
- Visiom Transformer 代码实现--ViT