效果预览
碰见网页引导功能的需求,于是收到了Jquerypagewalkthrough.js这个插件,在github上下载到源码,英文渣很尴尬,找啊找啊找。终于找到篇中文的博客教程:来源helloweba.com 作者:月光光

第一步 在需要引导的页面head部分加入css和js

1
2
3
4
5
<link rel="stylesheet" href="./css/jquery.pagewalkthrough.css">
<!-- jQuery -->
<script type="text/javascript" src="./jquery-2.1.1.js"></script>
<!-- Page walkthrough plugin(插件) -->
<script type="text/javascript" src="./jquery.pagewalkthrough.min.js"></script>

第二步 在body的最后加上引导的内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<style type="text/css">
#walkthrough-content{display:none}
</style>
<div id="walkthrough-content">
<div id="walkthrough-1">
<h3>jquerypagewalkthrough<br>简单使用</h3>
</div>
<div id="walkthrough-2">
<h3>下,博客的导航栏</h3>
<h3>bottom,blog navigation bar</h3>
</div>
<div id="walkthrough-3">
<h3>右,博客的logo</h3>
<h3>right,bolg logo</h3>
</div>
<div id="walkthrough-4">
<h3>上,博客的底部</h3>
<h3>top,blog footer</h3>
</div>
<div id="walkthrough-5">
<h3>左,博客切换白天还是黑夜模式</h3>
<h3>left,blog sun and moon switch</h3>
</div>
</div>

第三步 jquery调用pagewalkthrough

steps是一个数组,定义每一步引导调用的内容,参数wrapper定义了当前引导对应的元素位置(wrapper中的值就是css选择器),参数popup定义弹出提示引导层,参数content定义关联的内容元素,参数type定义弹出方式,包括tooltip和modal以及nohighlight三种方式,参数position定义了弹出层位置,包括top,left, right or bottom。

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<script>
$(function() {
$('body').pagewalkthrough({
name: 'introduction',
steps: [{
popup: {
content: '#walkthrough-1',
type: 'modal'
}
}, {
wrapper: '.page-title ul',
popup: {
content: '#walkthrough-2',
type: 'tooltip',
position: 'bottom'
}
}, {
wrapper: '.avatar',
popup: {
content: '#walkthrough-3',
type: 'tooltip',
position: 'right'
}
}, {
wrapper: '.footer-inner',
popup: {
content: '#walkthrough-4',
type: 'tooltip',
position: 'top'
}
}, {
wrapper: '.fa.fa-sun-o',
popup: {
content: '#walkthrough-5',
type: 'tooltip',
position: 'left'
}
}]
});

$('body').pagewalkthrough('show');
});
</script>

代码下载demo.zip

希望这篇文章能给你带来知识和乐趣,喜欢博主的文章可以加博主好友哦

有好的文章也可以向博主投稿哦