首先引入jQuery库和pagewalkthrough插件。
<link type="text/css" rel="stylesheet" href="jquery.pagewalkthrough.css" /> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="jquery.pagewalkthrough.min.js"></script>
然后我们在#walkthrough-content加入隐藏引导内容,就是每一步展示的内容,等会用pagewalkthrough插件调用。
<div class="main"> <div class="w1"></div> <div class="w2"></div> <div id="walkthrough-2"> jQuery插件库LOGO,点击这里可以跳转到网站首页。 </div> <div class="w3"></div> <div id="walkthrough-3"> 第二部演示 </div> <div class="w4"></div> <div id="walkthrough-4"> 第三部演示 </div> <div id="walkthrough-5"> 第四部演示 </div> <img src="img/jq22.jpg"> </div>
pagewalkthrough插件中steps是一个数组,定义每一步引导调用的内容,下面我们讲解这几个参数。
$(function() { // 设置参数 $('body').pagewalkthrough({ name: 'introduction', steps: [{ popup: { //定义弹出提示引导层 content: '#walkthrough-1', type: 'modal' } }, { wrapper: '.w1', //当前引导对应的元素位置 popup: { content: '#walkthrough-2', //关联的内容元素 type: 'tooltip', //弹出方式(tooltip和modal以及nohighlight) position: 'bottom' //弹出层位置(top,left, right or bottom) } }, { wrapper: '.w2', popup: { content: '#walkthrough-3', type: 'tooltip', position: 'bottom' } }, { wrapper: '.w3', popup: { content: '#walkthrough-4', type: 'tooltip', position: 'top' } }, { wrapper: '.w4', popup: { content: '#walkthrough-5', type: 'tooltip', position: 'top' } }] }); // 一步一步显示引导页 $('body').pagewalkthrough('show'); });
参数 | 描述 | 默认值 |
popup | 弹出提示引导层 | |
wrapper | 当前引导对应的元素位置 | |
type | 弹出方式(tooltip和modal以及nohighlight) | tooltip |
position | 弹出层位置(top,left, right or bottom) | bottom |
offsetHorizontal | 是否水平显示 | 0 |
offsetVertical | 是否垂直显示 | 0 |
width | 弹出层宽度 | 320 |
contentRotation | 是否跳过 默认不跳过 | 0 |
autoScroll | true | |
scrollSpeed | 1000 | |
lockScrolling | false | |
onEnter | null | |
当结束回调 | null |