jQuery分步式动画进度条

收藏

本文将演示一段基于jquery实现的网站注册动态多步骤进度条效果。

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

HTML

首先我们在#stepBar加入进度条.ui-stepBar和table.ui-stepLayout的各个阶段HTML代码：

<div id="stepBar" class="ui-stepBar-wrap"> 
    <div class="ui-stepBar"> 
        <div class="ui-stepProcess"></div> 
    </div> 
    <div class="ui-stepInfo-wrap"> 
        <table class="ui-stepLayout" border="0" cellpadding="0" cellspacing="0"> 
            <tr> 
                <td class="ui-stepInfo"> 
                    <a class="ui-stepSequence">1</a> 
                    <p class="ui-stepName">注册</p> 
                </td> 
                <td class="ui-stepInfo"> 
                    <a class="ui-stepSequence">2</a> 
                    <p class="ui-stepName">填写验证信息</p> 
                </td> 
                <td class="ui-stepInfo"> 
                    <a class="ui-stepSequence">3</a> 
                    <p class="ui-stepName">填写基本信息</p> 
                </td> 
                <td class="ui-stepInfo"> 
                    <a class="ui-stepSequence">4</a> 
                    <p class="ui-stepName">填写安全信息</p> 
                </td> 
                <td class="ui-stepInfo"> 
                    <a class="ui-stepSequence">5</a> 
                    <p class="ui-stepName">激活账户</p> 
                </td> 
                <td class="ui-stepInfo"> 
                    <a class="ui-stepSequence">6</a> 
                    <p class="ui-stepName">完成注册</p> 
                </td> 
            </tr> 
        </table> 
    </div> 
</div>

接着引入jQuery库、动画插件jquery.easing和stepBar.js插件：

<script type="text/javascript" src="js/jquery-1.8.2.js"></script> 
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script> 
<script type="text/javascript" src="js/stepBar.js"></script>

jQuery

调用stepBar插件：

$(function() { 
    stepBar.init("stepBar", { 
        step: 4, //阶段 
        change: true, //是否由灰色背景变成绿色背景 
        animation: true ////是否开启动画效果，若开启必须引入jquery.easing.1.3.js 
    }); 
});