jQuery进度条插件JQMeter的简单使用

最新推荐文章于 2024-06-09 22:58:43 发布
最新推荐文章于 2024-06-09 22:58:43 发布
阅读量6.2k 收藏
点赞数
分类专栏： jQuery 文章标签： jQuery 进度条 JQMeter
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hanhy136/article/details/80424014
版权
本文介绍了如何使用轻量级jQuery插件JQMeter创建进度条。首先，需要引入jQuery库和jqmeter.js文件。然后，在HTML中添加一个带id的div作为容器。最后，在JavaScript中初始化进度条。JQMeter提供了更多参数以实现不同效果，更多详情可参考相关网站。
摘要由CSDN通过智能技术生成

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文件是放

最低0.47元/天 解锁文章
miracle_xzyb
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery 进度条插件 v1.2
05-12
内容索引:脚本资源,jQuery,进度条,jQuery插件　　一个基于jQuery 的网页加载进度条插件，版本目前是 v1.2，具有动画效果的进度条，可以用作网络连接、上传或下载程序中，进度条很漂亮。
jQMeter —— 各种花样的 jQuery 进度条插件
weixin_34144848的博客
06-04 288
jQMeter 是一个简单的、轻量级的 jQuery 插件，它支持显示动态的水平或者是垂直进度条。还能够动态显示目标和完成量之间的关系。 你可以自定义外观，可以通过以下选项来自定义外观，如：宽度，高度，背景色，Bar 颜色等，还可以选择显示完成进度的百分比，以及控制动画的速度。 https://yqfile.alicdn.com/5cc1193e2c...
Chrome/Edge浏览器视频画中画可拉动进度条插件
meser88的博客
06-09 3150
平时看一些视频的时候，一般需要编辑一些其他的东西，于是开启画中画，但是画中画没有进度条，需要倒退前进得回到原视频，很麻烦。这里推荐插件Separate Window，可实现画中画进度条拉动。
jquery进度条插件
prospertu的专栏
04-08 1522
JQMeter官网地址：进入官网 在官网上我们也找不到他的这个在进度条开始后，用JS第N次修改进度值的函数，所以这个是建议只显示一次的进度使用，如果非要多次修改，可以多次调用生成函数，然后把动画时间改为0，百分比显示隐藏，看来效果有点生硬。 注：在官网上可以下载此JS。 jQMeter是一款简单实用的轻量级进度条jQuery插件，它可以显示为水平或垂直进度条，进度条加载时带有动画特效，...
进度条插件ProgressBar（如何调用jQuery插件学习第十天）
weixin_42306620的博客
08-29 3080
       ProgressBar是一款基于jQuery开发进度条插件，它的优点是：使用代码简洁，可轻松定制它的外观；当页面请求耗时较长，需要用户等待时使用，如文件上传和大图片，多数据加载时，可添加插件，以增加用户的体验。        ProgressBar插件在Images文件夹中对应6张图片，其中1张是背景色图片，另外5张为自定义的5种进度颜色图片。这5张图片都由长度相等的两个部分组成，...
jQuery进度条插件 jQuery progressBar
kevinlifeng的专栏
07-12 1566
$(document).ready(function() {    $("#pb1").progressBar();    $("#pb2").progressBar({ barImage: 'images/progressbg_yellow.gif'} );    $("#pb
精选 jQuery 加载动画和进度条插件汇总
ldl_xz的专栏
06-16 2695
精选 jQuery 加载动画和进度条插件汇总
jQuery - AJAX 简介
li514006030的博客
12-14 294
jQuery - AJAX 简介
带有进度条的jQuery文件上传插件
weixin_33895604的博客
01-29 94
jQuery File Upload Plugin允许一次选择多个文件和同时上传。也可以通过桌面或者文件管理器拖动文件到浏览器的方式上传文件。对于每个上传的文件都带有进度条标识上传进度，也可以对单个文件在上传进行期间暂停或取消上传。并且提供了一个API，用于设置各种选项和定义callBack方法用于处理上传事件。 转载于:https://www.cnblogs.com/zwx/archive...
jquery实现动态加载进度条
03-06
通过javascript技术，以及jquery后台动态交互动态加载进度条，并显示进度条信息。
JS实现进度条动态加载特效
10-15
主要为大家详细介绍了JS实现进度条动态加载特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
jQuery/CSS3动感实用的进度条插件 10种漂亮外观
08-23
最近这两天一直在为大家分享一些HTML5、CSS和SVG的炫酷动画，说实在并不是特别实用。这次我们来介绍一款实用的jQuery进度条插件，这款jQuery进度条插件的外观利用了CSS3的特性，让进度条外观显得非常时尚漂亮，一共有10种样式，非常实用。
jquery插件实现播放进度条
aboutcjp的博客
12-22 5760
自己写了一个插件，主要是实现播放进度条的，学生学习作品，可以拖动。不过在移动端还是不可拖动。 主要原理是设置一个容器，例如div，获得它的长度，然后设置时间，单位毫秒，把获得的长度除以时间，利用js定时器，每1秒改变一次。这就基本实现进度条了。 拖动的话，就是处理鼠标按下，移动，抬起这些动作来处理的。东西已经托管到github了地址 https://github.com/IMMC，有兴趣可以看
jquery ajax多文件上传，进度条
yangliuhbhd的博客
12-06 3032
jquery.AJAX文件上传，同步上传，多文件上传，进度条
jquery实现进度条状态展示
月落星河
05-06 2998
如上图所示，由于项目需要，需要做一个状态展示，当点击的时候填满整个长度，你需要下载jquery，代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-wi...
js+css3实现一个环形进度条插件
小敏哥的专栏
06-09 6901
进度条用多了，有没有想过环形的呢，例如这样子的 说实在的，虽然css3提供了很强大的动画功能，包括各种旋转，直线运动，然而，并没有曲线运动，那么只好综合运用已有的功能进行实现，这里用到的比较多的就是旋转，先看下面的这几段代码，这是网上一个哥们写的，先用来理解一下实现的原理，虽然有一堆的兼容性问题，只能在pc版的chome上面使用，但是用来学习已经足够了，后面再奉上修改后的源码。 html:
AuthBWC-0.3.3-py3-none-any.whl.zip
最新发布
08-07
AuthBWC-0.3.3-py3-none-any.whl.zip
jquery带节点步骤进度条插件
04-29
JQuery是一种广泛应用于前端开发的库，用于简化HTML文档遍历、事件处理、动画设计等操作。而带节点步骤进度条插件，则是一种基于JQuery开发的插件，可以为网页制作进度条效果，使得网页更加现代化和美观。 使用JQuery实现带节点步骤进度条插件，一般需要参照以下步骤： 1. 首先，需要定义一个进度条容器，可以使用HTML制作出一个div容器。 2. 接着，需要给容器添加样式，如宽度、高度、背景颜色等，并将其隐藏起来（display:none），以便之后进行显示。 3. 在需要调用进度条的元素上添加点击事件，以触发进度条的动画。 4. 在点击事件回调函数中，需要先获取容器的宽度和高度，并计算出每个节点的宽度，然后将进度条显示出来（display:block）。 5. 然后使用JQuery的animate()方法，逐步改变进度条的宽度（或高度），从而实现整个进度条的动画效果。 6. 最后，当进度条达到最终的节点时，需要将进度条的宽度（或高度）设置为0，并将其隐藏（display:none）。 以上就是使用JQuery制作带节点步骤进度条插件的步骤，通过使用这种插件，可以让网页更加动态和生动，提高用户体验。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值