jquery html5引导页,jQuery插件实现的页面功能介绍引导页效果

Helloweba.com之前也有相关文章介绍：《构建一个用于产品介绍的WEB应用》，相信对有需要的朋友有帮助。本文将介绍另一款基于jQuery的页面引导页插件：pagewalkthrough.js，来看如何使用它。

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: 'h2.top_title a',

popup: {

content: '#walkthrough-3',

type: 'tooltip',

position: 'bottom'

}

}, {

wrapper: 'a[href="http://www.helloweba.net/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插件官方提供了很多参数配置，包括设置弹出层宽度、滚动速度，是否自动滚动，锁定滚动，以及多种回调函数，定义上一步下一步按钮，以及方法调用等等，这些本文不再描述，有兴趣的朋友可以移步到项目官网了解更多：https://github.com/jwarby/jquery-pagewalkthrough

jquery html5引导页,jQuery插件实现的页面功能介绍引导页效果相关推荐

jQuery插件实现的页面功能介绍引导页效果
查看演示下载源码 Helloweba.com之前也有相关文章介绍:<构建一个用于产品介绍的WEB应用>,相信对有需要的朋友有帮助.本文将介绍另一款基于jQuery的页面引导页插件:pag ...
jquery手写轮播图_15个超强的jQuery/HTML5图片轮播插件
最近我们为大家分享过不少基于jQuery的图片轮播插件,当然也有很多使用了HTML5和CSS3的相关技术,让整个图片播放器显得更加美观,动画效果显得更加炫酷.这次我们特意为大家筛选了一些最新的jQue ...
html5+自动播放轮播插件,15个超强的jQuery/HTML5图片轮播插件
最近我们为大家分享过不少基于jQuery的图片轮播插件,当然也有很多使用了HTML5和CSS3的相关技术,让整个图片播放器显得更加美观,动画效果显得更加炫酷.这次我们特意为大家筛选了一些最新的jQue ...
html5图片轮播在线制作教程,15个超强的jQuery/HTML5图片轮播插件
最近我们为大家分享过不少基于jQuery的图片轮播插件,当然也有很多使用了HTML5和CSS3的相关技术,让整个图片播放器显得更加美观,动画效果显得更加炫酷.这次我们特意为大家筛选了一些最新的jQue ...
HTML5期末大作业：个人主页网站设计——个人介绍(45页) HTML+CSS+JavaScript 个人设计web前端大作业 HTML期末大作业...
常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 明星. 服装. 体育. 化妆品. 物流. 环保. 书籍. 婚纱. 游 ...
HTML5期末大作业：电影网站设计——电影介绍(11页) 大学生电影网页作品电影网页设计作业模板学生网页制作源代码下载
HTML5期末大作业:电影网站设计--电影介绍(11页) 大学生电影网页作品电影网页设计作业模板学生网页制作源代码下载常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物 ...
HTML5期末大作业：汽车网站设计——汽车介绍(6页) HTML+CSS+JavaScript 学生DW网页设计作业成品学生汽车网页作业, 汽车网页作业成品, 汽车网页作业模板
HTML5期末大作业:汽车网站设计--汽车介绍(6页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计计算机毕设网页设计源码常见网页设计作业题材有 ...
HTML5期末大作业：个人主页网站设计——个人介绍(45页) HTML+CSS+JavaScript 个人设计web前端大作业 HTML期末大作业
HTML5期末大作业:个人主页网站设计--个人介绍(45页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计计算机毕设网页设计源码常见网页设计作业题 ...
炫云3ds Max插件的非典型功能介绍
炫云客户端有关3ds Max插件的常用功能,想必大家都已经知道了,这边也不再赘叙.本期主要介绍一些不常用的功能,它们究竟可以发挥哪些奇效呢?咱们底下见真章一:渲染软件功能炫云客户端的3ds Max ...

jquery html5引导页,jQuery插件实现的页面功能介绍引导页效果

欢迎来到Helloweba示例DEMO演示页

jquery html5引导页,jQuery插件实现的页面功能介绍引导页效果相关推荐

最新文章

热门文章