简洁实用的jQuery进度条插件

这是一款简洁实用的jQuery进度条插件。该插件使用简单,通过在页面中放置指定的HTML代码,即可生成带动画效果的进度条。

使用方法:

在页面中引入an-skill-bar.css和jquery、an-skill-bar.js文件。

<link href=”css/an-skill-bar.css” rel=”stylesheet”>
<script type=”text/javascript” src=”js/jquery.min.js”></script>
<script type=”text/javascript” src=”js/an-skill-bar.js”></script>

HTML:

该进度条的基本HTML结构如下:

<div class=”skillbar html”>
<div class=”filled” data-width=”90%”>
</div>
<span class=”title”>HTML</span>
<span class=”percent”>90%</span>
</div>

初始化插件:

在页面DOM元素加载完毕之后,通过 skillbar() 方法来初始化该插件。

$(document).ready(function () {
$(“.skillbar”).skillbar();
});

你可以在初始化时,指定进度条的动画速度和背景颜色。

$(document).ready(function () {
$(“.skillbar”).skillbar({
speed: 1000,
bg : “#008080”
});
});

该进度条插件的github网址为:https://github.com/hasanmisbah/an-skill-bar

本文转自:jQuery之家 http://www.htmleaf.com/jQuery/Form/201810305390.html

分享海报

展开评论

关于我

大胡子,男,生于1994年,河南洛阳人。

很多人对我的网名有误解,这里顺便解释一下,我姓胡,大胡子这个网名始于2013年,早期的一些网友管我叫胡子,然后我就给自己取了个网名叫「大胡子」,这里的「大」是长大了的意思。

自由职业者,8年WordPress网站开发经验,不善言辞,喜欢爬山、摄影,油泼面的粉丝,和很多人一样,包揽了生活中不同的角色和位置。

如果你有网站相关类的业务需求,可以联系我哦,期待与你的合作~