网站引导页:用jQuery插件pagewalkthrough打造自己的页面功能介绍引导页效果

[本文为转载——重编辑]


插件描述:所有的所有,都直接调用!

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


首先在你的原有网站页面中引入jQuery库和pagewalkthrough插件。

注意你的引用路径是否正确!

<!-- CSS --> 
<link rel="stylesheet" href="css/jquery.pagewalkthrough.css">

<!-- jQuery --> 
<script type="text/javascript" src="jquery.min.js"></script>

<!-- Page walkthrough plugin(插件) --> 
<script type="text/javascript" src="jquery.pagewalkthrough.min.js"></script>


接着,在我们的页面最下部加入引导内容(当然这些代码还是在<body>和</body>标签之间的最后面!),这些内容就是每一步需要展示的内容,需要先隐藏,等下会用jQuery来调用的。

手动隐藏设置:(为什么这里要手动设置呢?因为你下载的东东,没有设置在CSS中!)

在页面<head>和</head>间加入样式:

<style type="text/css">
#walkthrough-content{display:none}
</style>


这里,复制粘贴吧!放在<body>和</body>标签之间的最后面!是的,最后面,最后面,最后面!

<div id="walkthrough-content"> 
    <div id="walkthrough-1"> 
        <h3>欢迎来到PageWalkThrough示例DEMO演示页</h3> 
 
        <p>页面功能介绍引导页的效果是通过一款叫做pagewalkthrough.js的jQuery插件实现的。</p> 
        <p>这里可以用HTML标签语句哟!如链接:本文由<a href="http://qoogle.cn" target="_blank">qoogle.cn</a>重编辑的。</p> 
        <p>点击下一步了解更多...</p> 
    </div> 
 
    <div id="walkthrough-2"> 
        这里是qoogle.cn网站的LOGO,点击这里可以直通网站首页。 
    </div> 
 
    <div id="walkthrough-3"> 
        点击这里可以直接看WalkThrough插件的使用教程。 
    </div> 
 
    <div id="walkthrough-4"> 
        点击这里可以去WalkThrough官网查看源码和原码,全英文的哦。。 
    </div> 
 
    <div id="walkthrough-5"> 
        这是本文介绍的WalkThrough引导页
    </div> 
</div>

引导内容是支持html标签的,你可以在里面用html标签加入链接、图片等信息。

还有就是引导页所需的箭头图片已经打包好,直接用css调用(自动调用,因为有jquery.pagewalkthrough.css),关于字体,你可以调用外部字体,如手写字体可能效果更好。

你需要改的是:1、文字内容(支持HTML);2、增加步数,即复制粘贴内容部分的一对<div>标签,然后改递增数字。


接下来就是用jQuery调用上面的内容,

复制下面代码,放置上面代码的下面。

<script>
$(function() {
    // Set up tour
    $('body').pagewalkthrough({
        name: 'introduction',
        steps: [
	   { popup: {content: '#walkthrough-1',type: 'modal' }
        }, {wrapper: '#logo',popup: {content: '#walkthrough-2',type: 'tooltip',position: 'bottom'}
        }, {wrapper: 'h2.top_title a',popup: {content: '#walkthrough-3',type: 'tooltip',position: 'bottom'}
        }, {wrapper: 'a[href="http://files.cnblogs.com/files/hnyei/jq_zhezhaoyd.rar"]', popup: {content: '#walkthrough-4',type: 'tooltip',position: 'right'}
        }, {wrapper: '#footer p',popup: {content: '#walkthrough-5',type: 'tooltip',position: 'top'}
        }, {wrapper: '#main a span.STYLE1',popup: {content: '#walkthrough-6',type: 'tooltip',position: 'top'}
        }]
    });
    // Show the tour
    $('body').pagewalkthrough('show');
});
</script>

你可能需要修改的地方,有4处:

1、wrapper后面的单引号 ' ' 里面的内容。它是代表在你的页面中寻址定位对应的元素(需要唯一定位!),你可以利用浏览器自带的“开发者工具”查找你的元素标签。

2、content是定义关联的内容元素,你如果是和我一样的小白,只改#walkthrough后面的数字吧,这和上面的代码中的内容ID是对应的哟。

3、type是引导显示的方式,有三种:tooltip(特指区域)、modal(全局,不特指区域)以及nohighlight(没有高亮)。我也不懂,你看着办。

4、position是你的内容在你高亮指定区域的相对位置,有四个(top、left、right、bottom)。别问我,我英文不好,只知道28个字母^_^


OK了,保存,刷新你的页面,看看效果吧!

===========================


原文、在线演示、源码下载,地址如下:

https://www.helloweba.com/view-blog-286.html


项目官网,gitbub源码:https://github.com/jwarby/jquery-pagewalkthrough

pagewalkthrough.js参数配置。

参数描述默认值
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
当按enter回调
null
onLeave
当结束回调
null


如果文章对您有帮助|有启发|有共鸣|有“爽了”,请随意打赏。您的支持是我的动力和价值的体现。

----------我不是街头卖艺者,但我渴望被打赏,博客要生存下去不容易。
----------我不是酒店服务生,但我渴望被打赏,博主也有妻儿子女一家子人。
----------我不是乞丐叫花子,但我渴望被打赏,渴望被打赏的价值认同感。
----------我不是建筑搬运工,但我渴望被打赏,我是蜜蜂我阅读/挑选/整合/转载/传播。
----------我不是作家或教授,但我渴望被打赏,咱中国人也能主动为知识/为受益而付费。

感谢土豪的打赏!


一码支持:微信/支付宝

打赏qoogle的二维码


分享,也是您对我的热力支持。谢谢!

内容版权声明:除转载分类下的文章来源网络(直转或整合而成),其它皆为本站原创文章。

转载注明出处:http://qoogle.cn/?id=42

发表评论(不用注册哟!)

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。