简洁实用的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

暂无评论