这篇文章主要介绍如何使用jQuery插件实现引导页效果，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

成都创新互联从2013年成立，先为临清等服务建站，临清等地企业，进行企业商务咨询服务。为临清企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

HTML

首先记得加载所需的css文件和jQuery库文件，以及pagewalkthrough插件。

接着，我们在页面的最下部加入引导内容，就是每一步需要展示的内容，默认先隐藏内容，等会用jQuery调用。

   

       

欢迎来到Helloweba示例DEMO演示页

       

页面功能介绍引导页的效果是通过一款叫做pagewalkthrough.js的jQuery插件实现的。

       

点击下一步了解更多...

   

   

       这里是Helloweba网站LOGO，点击这里可以直通网站首页。    

   

       点击这里可以直接看插件的使用教程。    

   

       点击这里去下载源码，免费的哦。。    

   

       这是页脚和版权信息。    

引导内容支持html内容，你可以在里面加入链接、图片等信息。还有就是引导页所需的箭头图片已经打包好，直接用css调用，关于字体，你可以调用外部字体，如手写字体可能效果更好。

jQuery

你完全可以在页面底部加入如下代码来调用pagewalkthrough，关键选项steps是一个数组，定义每一步引导调用的内容，参数wrapper定义了当前引导对应的元素位置，参数popup定义弹出提示引导层，参数content定义关联的内容元素，参数type定义弹出方式，包括tooltip和modal以及nohighlight三种方式，参数position定义了弹出层位置，包括top,left, right or bottom。

$(function() {    $('body').pagewalkthrough({        name: 'introduction',        steps: [{           popup: {               content: '#walkthrough-1',               type: 'modal'           }        }, {            wrapper: '#logo',            popup: {                content: '#walkthrough-2',                type: 'tooltip',                position: 'bottom'            }        }, {            wrapper: 'h3.top_title a',            popup: {                content: '#walkthrough-3',                type: 'tooltip',                position: 'bottom'            }        }, {            wrapper: 'a[href="http://www.xuebuyuan.com/down-286.html"]',            popup: {                content: '#walkthrough-4',                type: 'tooltip',                position: 'right'            }        }, {            wrapper: '#footer p',            popup: {                content: '#walkthrough-5',                type: 'tooltip',                position: 'top'            }        }]    });    // Show the tour    $('body').pagewalkthrough('show'); });

保存之后，运行就能看到你要的效果。pagewalkthrough.js插件官方提供了很多参数配置，包括设置弹出层宽度、滚动速度，是否自动滚动，锁定滚动，以及多种回调函数，定义上一步下一步按钮，以及方法调用等等，这些本文不再描述。

以上是“如何使用jQuery插件实现引导页效果”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！

网站栏目：如何使用jQuery插件实现引导页效果-创新互联
网址分享：http://csdahua.cn/article/cdgghg.html