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 相关文章推荐
判断是否输入完毕再激活提交按钮
Jun 26 Javascript
javascript arguments使用示例
Dec 16 Javascript
基于JS判断iframe是否加载成功的方法(多种浏览器)
May 13 Javascript
老生常谈 js中this的指向
Jun 30 Javascript
DOM中事件处理概览与原理的全面解析
Aug 16 Javascript
微信小程序 网络请求(post请求,get请求)
Jan 17 Javascript
前端开发必知的15个jQuery小技巧
Jan 22 Javascript
通过jsonp获取json数据实现AJAX跨域请求
Jan 22 Javascript
老生常谈jacascript DOM节点获取
Apr 17 Javascript
基于vue实现可搜索下拉框定制组件
Mar 26 Javascript
vue全局使用axios的操作
Sep 08 Javascript
JS + HTML 罗盘式时钟的实现
May 21 Javascript
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
新版PHP极大的增强功能和性能
2006/10/09 PHP
在字符串中把网址改成超级链接
2006/10/09 PHP
php基础学习之变量的使用
2011/06/09 PHP
javascript 框架小结 个人工作经验
2009/06/13 Javascript
理解Javascript_02_理解undefined和null
2010/10/11 Javascript
juqery 学习之五 文档处理 包裹、替换、删除、复制
2011/02/11 Javascript
Javascript创建自定义对象 创建Object实例添加属性和方法
2012/06/04 Javascript
jquery ui dialog实现弹窗特效的思路及代码
2013/08/03 Javascript
淘宝网提供的国内NPM镜像简介和使用方法
2014/04/17 Javascript
jquery 插件实现瀑布流图片展示实例
2015/04/03 Javascript
深入理解JavaScript编程中的原型概念
2015/06/25 Javascript
JavaScript通过HTML的class来获取HTML元素的方法总结
2016/05/24 Javascript
不间断循环滚动效果的实例代码(必看篇)
2016/10/08 Javascript
利用jQuery实现一个简单的表格上下翻页效果
2017/03/14 Javascript
Vue.js devtool插件安装后无法使用的解决办法
2017/11/27 Javascript
微信小程序录音实现功能并上传(使用node解析接收)
2020/02/26 Javascript
使用python装饰器验证配置文件示例
2014/02/24 Python
详解Python中__str__和__repr__方法的区别
2015/04/17 Python
Python实现扫描局域网活动ip(扫描在线电脑)
2015/04/28 Python
python 输入一个数n,求n个数求乘或求和的实例
2018/11/13 Python
python实现美团订单推送到测试环境,提供便利操作示例
2019/08/09 Python
屏蔽Django admin界面添加按钮的操作
2020/03/11 Python
python 使用while循环输出*组成的菱形实例
2020/04/12 Python
Python调用shell命令常用方法(4种)
2020/05/11 Python
CSS3 border-radius圆角的实现方法及用法详解
2020/09/14 HTML / CSS
boostrap modal 闪现问题的解决方法
2020/09/01 HTML / CSS
世界上最大的专业美容用品零售商:Sally Beauty
2017/07/02 全球购物
Stefania Mode美国:奢华设计师和时尚服装
2018/01/07 全球购物
医院实习接收函
2014/01/12 职场文书
《小小雨点》教学反思
2014/02/18 职场文书
公司请假条格式
2014/04/11 职场文书
国际经济与贸易专业求职信
2014/07/10 职场文书
大学生毕业评语
2014/12/31 职场文书
企业战略合作意向书
2015/05/08 职场文书
2015年党务工作者个人工作总结
2015/10/22 职场文书
简短的人生哲理(38句)
2019/08/13 职场文书