如何使用jQuery插件实现引导页效果-创新互联
这篇文章主要介绍如何使用jQuery插件实现引导页效果,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
成都创新互联从2013年成立,先为临清等服务建站,临清等地企业,进行企业商务咨询服务。为临清企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。HTML
首先记得加载所需的css文件和jQuery库文件,以及pagewalkthrough插件。
接着,我们在页面的最下部加入引导内容,就是每一步需要展示的内容,默认先隐藏内容,等会用jQuery调用。
页面功能介绍引导页的效果是通过一款叫做pagewalkthrough.js的jQuery插件实现的。 点击下一步了解更多...欢迎来到Helloweba示例DEMO演示页
这里是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://scyanting.com/article/cdgghg.html