jQuery简单实用的轻量级进度条插件

jQMeter是一款简单实用的轻量级进度条jQuery插件,它可以显示为水平或垂直进度条,进度条加载时带有动画特效,你只需要简单的传入一些参数到jQMeter对象的构造函数中就可以完成你想要的进度条效果。

该进度条插件的构造函数中允许你定义进度条的宽度、高度、背景色、进度条颜色等等参数,通过这些参数你可以构造自己的进度条样式。

效果演示:http://www.htmleaf.com/Demo/201504131672.html

下载地址:http://www.htmleaf.com/jQuery/Layout-Interface/201504131671.html

时间: 2024-10-06 13:41:04

jQuery简单实用的轻量级进度条插件的相关文章

基于Jquery的音乐播放器进度条插件

自己基于豆瓣FM的ui仿写qq音乐时,基于Jquery手写的进度条插件,效果图如下: 主要特色: ① 可自适应挂载元素的宽度,也可以自己设置进度条宽度: ② 支持部分默认参数修改(具体见使用说明): ③ 允许最大时间为23:59:59,高于此值将默认修改为此值: ④ 可以自己控制进度条动画的开关及重置: ⑤ 可以获取进度条当前时间和宽度,与H5的audio标签协调使用. 使用说明: /* * 功能描述:播放器进度条 * 参数: * option:挂载父元素 * inTime:进度条时间长度 *

jQuery简单实用的图片标题动画效果插件

CaptionerJs是一款简单实用的jQuery图片标题动画效果插件.网上有许多图片标题插件,但是CaptionerJs可以为你创建干净整洁并且带有语义的图片标题HTML代码. CaptionerJs不使用div作为图片层,而是使用figure和figcaption元素来转换图片,使图片和图片标题有明确的语义. 你可以在书写图片代码的时候使用标准的HTML图片代码,CaptionerJs会使用title和alt属性来制作图片的标题. 效果演示:http://www.htmleaf.com/De

Html5添加SVG的轻量级jQuery进度条插件教程

一.使用方法 使用该jQuery进度条插件需要引入jQuery和jquery.progress.js文件. <script src="js/jquery.min.js"></script> <script src="js/jquery.progress.js"></script> 二.Html结构 该jQuery进度条的HTML结构使用一个<svg>元素来制作. <svg id="conta

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

参考   http://www.lanrenzhijia.com/jquery/4121.html demo下载 <script src="js/jquery.lineProgressbar.js" type="text/javascript"></script> $(function(){ $('#progressbar1').LineProgressbar({ percentage: 50 }); $('#progressbar2').L

Jquery进度条插件 Progress Bar插件应用方法

搞的我小纠结了一会,最后感谢同事分享文章,得以结局,呵呵,小经验还是要保存的个人使用总结: <script type="text/ 网页特效" src="/Scripts/jquery-1.4.4.min.js"></script> <script type="text/javascript" src="/Scripts/Method/jquery.progressbar.min.js">&

jQuery彩色条纹进度条插件

这是一款效果非常炫酷时尚的jQuery彩色条纹进度条插件.该进度条插件可以定制多种颜色,并且可以定制是否显示进度条动画.进度条可以是彩带模式,也可以使纯色模式. 该jq进度条插件最大的特点是进度条进入视口时才开始产生动画,效果非常好. 该进度条jquery插件使用了Flat UI Color Scheme来生成进度条的配色方案.如果你使用的颜色的class没有被提供,将会显示为灰色. 在线演示:http://www.htmleaf.com/Demo/201502031322.html 下载地址:

基于Jquery 简单实用的弹出提示框

引言: 原生的 alert 样子看起来很粗暴,网上也有一大堆相关的插件,但是基本上都是大而全,仅仅几句话可以实现的东西,可能要引入好几十k的文件,所以话了点时间自己写了个弹出效果,放到项目上去发现效果还不错,这里贴出来,做个备忘,有需要的同学可以拿去,也可以作为一个参考. 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.d

HTML5圆形百分比进度条插件circleChart(记录)

介绍:一款可以描绘圆圈进度条的jQuery插件(可用作统计图) circleChart使用方法 在页面中引入jquery和circleChart.min.js文件. <script src="path/to/jquery.min.js"></script> <script src="path/to/circleChart.min.js"></script> HTML结构 使用一个<div>元素作为该圆形百分

CSS3和js谷歌Material Design进度条插件

mprogress是一款使用纯JS和CSS3制作的谷歌Material Design样式的进度条插件.该插件没有依赖任何外部库.它可以制作4种类型的进度条动画,使用扁平化设计,非常时尚. 该进度条插件有4种类型的动画方式,分别是:确定型.缓冲型.不确定型和查询确定型. mprogress是移动设备优先的js插件,?所有类型的进度条都可以工作在Chrome 和 Firefox浏览器上.Determinate类型的进度条可以工作在所有浏览器上. 在线演示:http://www.htmleaf.com