jquery响应式向导切换特效代码插件

jquery响应式向导切换特效代码插件

wizzy是一款jquery响应式向导插件。该jquery向导插件提供漂亮的ui效果,可以按步骤引导用户进行操作。界面十分漂亮,并且使用非常简单。

使用方法
在页面中引入jquery和jquery.wizzy.js和jquery.wizzy.css文件。

1
2
3
<link href="dist/css/jquery.wizzy.css" rel="stylesheet">
<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="js/jquery.wizzy.js"></script>

HTML结构
例如你需要为一张图片制作星星闪耀效果,它的HTML结构如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<div class="wz-wrapper wizzy">
        <div class="wz-inner">
            <div class="wz-header">
                <nav>
                    <a href="#">步骤一</a>
                    <a href="#">步骤二</a>
                    <a href="#">步骤三</a>
                    <a href="#">步骤四</a>
                </nav>
            </div>
            <div class="wz-body">
                <div class="wz-step">
                    <p>内容1</p>
                </div>
                <div class="wz-step">
                    <p>内容2</p>
                </div>
                <div class="wz-step">
                    <p>内容3</p>
                </div>
                <div class="wz-step">
                    <p>内容3</p>
                </div>
            </div>
            <div class="wz-navigator"></div>
        </div>
    </div>

初始化插件

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

1
$('.wizard').wizzy();

文件信息:

    0

    发表评论