jquery进度条插件

JQMeter官网地址：进入官网

在官网上我们也找不到他的这个在进度条开始后，用JS第N次修改进度值的函数，所以这个是建议只显示一次的进度使用，如果非要多次修改，可以多次调用生成函数，然后把动画时间改为0，百分比显示隐藏，看来效果有点生硬。

注：在官网上可以下载此JS。

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

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

使用方法

使用这个进度条插件必须先引入jQuery和jqmeter.min.js文件。

1 2	`<script` `src="js/jquery.min.js"` `type="text/javascript"></script>` `<script` `type="text/javascript"` `src="js/jqmeter.min.js"></script>`

HTML结构

该进度条插件的HTML结构使用一个空的<div>即可。

1	`<div` `id="jqmeter-container"></div>`

初始化插件

在页面加载完毕之后，可以通过下面的方法来调用该进度条插件。

$(document).ready(function(){

$('#jqmeter-container').jQMeter();

});

注意：该进度条插件有两个必填的参数：goal和raised。此外还有一些可用的参数，其中一些参数也可以使用css来实现，如颜色参数。

$('#jqmeter-container').jQMeter({

goal:'$1,000',

raised:'$200',

orientation:'vertical',

width:'50px',

height:'200px'

});

配置参数

参数类型默认值描述

goal string 无默认值，必填参数进度条的总长度。可以设置为字符串，如"$9000"，或整数，如:"9000"

raised string 无默认值，必填参数进度条的当前进度。可以设置为字符串，如"$5000"，或整数，如:"5000"

width string 100%-水平宽度。（在水平进度条中必须设置）设置进度条的水平宽度。可以设置为百分比或像素值

height string 50px。（在垂直进度条中必须设置）设置进度条的垂直高度。可以设置为百分比或像素值

bgColor string #444 进度条的背景颜色。支持hex、rgba和颜色关键字。

barColor string #bfd255 进度条的颜色。支持hex、rgba和颜色关键字。

orientation string horizontal 进度条的方向，可设置为： 'horizontal' 或 'vertical'。如果设置为垂直进度条，该参数必须设置。

displayTotal boolean true 是否显示进度条完成的百分比数。

animationSpeed integer 2000 进度条动画时间，单位毫秒

counterSpeed integer 2000 进度条计数的时间，单位毫秒

jquery进度条插件相关推荐

jq画布插件_超炫HTML 5开发的jQuery进度条插件
今天我们分享一个超酷的使用HTML5画布技术开发的进度条插件 - percentageloader.这个插件比普通的水平进度条使用更加炫酷的效果,图形效果类似以前我们介绍的jQuery knob插件 ...
jQuery进度条插件JQMeter的简单使用
jQMeter是一款简单使用的轻量级进度条jQuery插件效果图:该效果时设置了进度条宽度,高度,动画时间,计数时间,宽度,高度使用过程 1.需要引入的js文件基于jQuery的:<scr ...
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 的每个展 ...
Process插件：typecho加载页面进度条插件
介绍: typecho加载页面进度条插件这是一款适用于typecho任何主题的加载页面进度条,可以让你的博客加载时显得更加顺滑而不会显得过于突兀,使用本插件可以很好得起到视觉缓冲的作用. 本插件有十 ...

jquery进度条插件

jquery进度条插件相关推荐

最新文章

热门文章