jQuery插件pagewalkthrough实现引导页效果


Posted in Javascript onJuly 05, 2015

现在很多网站不仅是介绍,更多的是有一些功能,怎么样让客户快速的知道网站有哪些功能呢?这里pagewalkthrough.js插件能帮我们实现,它是一个轻量级的jQuery插件,它可以帮助我们创建一个遮罩引导层,实现页面功能引导功能,引导完成显示页面内容。

jQuery插件pagewalkthrough实现引导页效果

html代码:

<div id="walkthrough-content">
  <div id="walkthrough-1">
    <h3>欢迎来到网页引导示例DEMO演示页</h3>

    <p>页面功能介绍引导页的效果是通过一款叫做<a href="https://github.com/jwarby/jquery-pagewalkthrough" target="_blank">pagewalkthrough.js</a>的jQuery插件实现的。</p>
    <p>点击下一步了解更多...</p>
  </div>

  <div id="walkthrough-2">
    这里是网站LOGO,点击这里可以直通网站首页。
  </div>

  <div id="walkthrough-3">
    点击这里可以直接看插件的使用教程。
  </div>

  <div id="walkthrough-4">
    点击这里去下载源码,免费的哦。。
  </div>

  <div id="walkthrough-5">
    这是页脚和版权信息。
  </div>
</div>

js文件和代码:

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.pagewalkthrough.min.js"></script>
<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'}
    }]
  });
  // Show the tour
  $('body').pagewalkthrough('show');
});
</script>

css文件:

<link rel="stylesheet" href="css/jquery.pagewalkthrough.css">
<!--[if lt IE 9]>
<script src="html5.js"></script>
<![endif]-->
<style type="text/css">
.demo{text-align:center}
.button {display: inline-block;outline: none;cursor: pointer;text-align: center;text-decoration: none;font: 22px/100% 'Microsoft yahei',Arial, Helvetica, sans-serif;padding: .5em 2em .55em;text-shadow: 0 1px 1px rgba(0,0,0,.3);-webkit-border-radius: .5em; -moz-border-radius: .5em;border-radius: .5em;-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.button:hover {text-decoration: none;}
.button:active {position: relative;top: 1px;}
/* green */
.green {color: #e8f0de;border: solid 1px #538312;background: #64991e;background: -webkit-gradient(linear, left top, left bottom, from(#7db72f), to(#4e7d0e));background: -moz-linear-gradient(top, #7db72f, #4e7d0e);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7db72f', endColorstr='#4e7d0e');}
.green:hover {background: #538018;background: -webkit-gradient(linear, left top, left bottom, from(#6b9d28), to(#436b0c));background: -moz-linear-gradient(top, #6b9d28, #436b0c);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6b9d28', endColorstr='#436b0c');color:#fff}
.green:active {color: #a9c08c;background: -webkit-gradient(linear, left top, left bottom, from(#4e7d0e), to(#7db72f));background: -moz-linear-gradient(top, #4e7d0e, #7db72f);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4e7d0e', endColorstr='#7db72f');}
#walkthrough-content{display:none}
#walkthrough-content h3{height:30px; line-height:30px}
#walkthrough-content p{line-height:28px}
</style>

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
asp(javascript)全角半角转换代码 dbc2sbc
Aug 06 Javascript
用dtree实现树形菜单 dtree使用说明
Oct 17 Javascript
js实现飞入星星特效代码
Oct 17 Javascript
JsRender for index循环索引用法详解
Oct 31 Javascript
JavaScript实现当网页加载完成后执行指定函数的方法
Mar 21 Javascript
AngualrJS中每次$http请求时的一个遮罩层Directive
Jan 26 Javascript
AngularJS实现动态编译添加到dom中的方法
Nov 04 Javascript
IE8兼容Jquery.validate.js的问题
Dec 01 Javascript
JavaScript 数据类型详解
Mar 13 Javascript
jQuery获取table表中的td标签(实例讲解)
Jul 28 jQuery
微信小程序登录session的使用
Mar 17 Javascript
vue elementUI表格控制对应列
Apr 13 Vue.js
IE浏览器下PNG相关功能
Jul 05 #Javascript
jQuery的Scrollify插件实现滑动到页面下一节点
Jul 05 #Javascript
javascript实现控制的多级下拉菜单
Jul 05 #Javascript
javascript遇到html5的一些表单属性
Jul 05 #Javascript
浅谈angularJS 作用域
Jul 05 #Javascript
javascript 应用小技巧方法汇总
Jul 05 #Javascript
javascript常用功能汇总
Jul 05 #Javascript
You might like
Smarty foreach控制循环次数的实现详解
2013/07/03 PHP
PHP缓存机制Output Control详解
2014/07/14 PHP
php 数组处理函数extract详解及实例代码
2016/11/23 PHP
PHP自定义函数获取汉字首字母的方法
2016/12/01 PHP
PHP封装curl的调用接口及常用函数详解
2018/05/31 PHP
mysql输出数据赋给js变量报unterminated string literal错误原因
2010/05/22 Javascript
javascript dom追加内容实现示例
2013/09/21 Javascript
NodeJS Web应用监听sock文件实例
2015/02/18 NodeJs
JavaScript中函数(Function)的apply与call理解
2015/07/08 Javascript
详解JavaScript中的Unescape()和String() 函数
2015/11/09 Javascript
使用Bootstrap + Vue.js实现添加删除数据示例
2017/02/27 Javascript
react-redux中connect()方法详细解析
2017/05/27 Javascript
浅谈react.js中实现tab吸顶效果的问题
2017/09/06 Javascript
基于Vue渲染与插件的加载顺序的问题详解
2018/03/05 Javascript
详解关于Vue2.0路由开启keep-alive时需要注意的地方
2018/09/18 Javascript
Vue 配合eiement动态路由,权限验证的方法
2018/09/26 Javascript
antd Upload 文件上传的示例代码
2018/12/14 Javascript
Vue CLI 3.x 自动部署项目至服务器的方法
2019/04/02 Javascript
jquery3和layui冲突导致使用layui.layer.full弹出全屏iframe窗口时高度152px问题
2019/05/12 jQuery
Vue.js计算机属性computed和methods方法详解
2019/10/12 Javascript
Vue使用富文本编辑器Vue-Quill-Editor(含图片自定义上传服务、清除复制粘贴样式等)
2020/05/15 Javascript
[55:47]DOTA2上海特级锦标赛C组小组赛#2 LGD VS Newbee第三局
2016/02/27 DOTA
[02:51]2018年度DOTA2最佳中单位选手-完美盛典
2018/12/17 DOTA
python编写朴素贝叶斯用于文本分类
2017/12/21 Python
十分钟利用Python制作属于你自己的个性logo
2018/05/07 Python
Linux下python3.7.0安装教程
2018/07/30 Python
Django框架的中的setting.py文件说明详解
2018/10/15 Python
使用python list 查找所有匹配元素的位置实例
2019/06/11 Python
Pandas0.25来了千万别错过这10大好用的新功能
2019/08/07 Python
Pytorch学习之torch用法----比较操作(Comparison Ops)
2020/06/28 Python
Dr. Martens马汀博士德国官网:马丁靴鼻祖
2019/12/26 全球购物
表演方阵解说词
2014/02/08 职场文书
韩语专业职业生涯规划范文:成功之路就在我们脚下
2014/09/11 职场文书
支部书记四风问题对照检查材料
2014/10/04 职场文书
公安交警中队队长个人对照检查材料思想汇报
2014/10/05 职场文书
Vue router配置与使用分析讲解
2022/12/24 Vue.js