开发者社区> 文艺小青年> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

网页引导:jQuery插件实现的页面功能介绍引导页效果

简介:
+关注继续查看

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

下载源码

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>
复制代码

 本文转自寒意博客园博客,原文链接:http://www.cnblogs.com/hnyei/p/4606887.html,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
25个强大的 jQuery 砌体网页设计作品
砌体(Masonry)是一种网页排布形式,类似于砖砌体、石砌体建造的结构,如下图,左侧是传统的使用CSS浮动实现的布局效果,右图是砌体排 布。砌体布局在不规则的网页内容块布局中非常有用,能够充分利用网页空间,很多网站的照片浏览就采用了砌体形式。
589 0
基于 jQuery 实现的精致作品集图片导航效果
  今天,我们要用 jQuery 来创建一个作品集图像的导航模板。我们的想法是,以分组的方式显示一组作品集,并通过二维的方式(水平/垂直)来浏览。任一箭头或当前图像下方的小盒子可以作为导航使用。     在线演示     下载源码   您可能感兴趣的相关文章 网站开发中很有...
780 0
分享8款精美的jQuery图片播放插件
本文将和大家一起分享8款精美的jQuery图片播放插件,每一款插件均有演示和源码下载,有兴趣的朋友可以下载使用和研究。废话不多说了,直接上这些插件。 1、3D轮播相册 这款3D相册插件利用了HTML5特性,让相片播放具有了3D效果,浏览器有限制哦。
1116 0
Croppic – 免费开源的 jQuery 图片裁剪插件
  Croppic 这款开源的 jQuery 图片裁剪插件能够满足网站开发人员各种不同的使用需要。只需要简单的上传图片,就可以实现你想要的图像缩放和裁剪功能。因为使用了 HTML5 FormData  对象,所以目前只支持 IE 10+、Chrome 和 Firefox 等现代浏览器。
1087 0
TwentyTwenty – 使用 jQuery 实现图片对比功能
  这是一款非常棒的图片对比工具,能够方便的应用到你的网站中。其基本思路是把两张图片层叠在一起,当你拖动滑竿的时候,利用 CSS clip 裁剪图片,进行形成视觉对比效果。 您可能感兴趣的相关文章 Metronic – 基于 Bootstrap 响应式后台管理模板 HTML Inspec...
1005 0
基于jquery的图片展示--卡牌翻转效果
原文 http://www.cnblogs.com/daynow/archive/2013/04/29/3051233.html   卡牌翻转效果是一种很好玩的效果,是我用Jquery实现的一种效果,跟Flash实现的效果几乎一模一样。
1161 0
网站项目必备——12款经典的白富美型 jQuery 图片轮播插件
  图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果。本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件能够帮助到你。
1714 0
[转贴]使用jQuery自动缩图片 - [jQuery]
具体思路: 通过具体容器取得容器内所有图片 循环检查所有图片长宽 对超过的图重新定高度. 直接写成一个扩展好了,以后可以直接用. jquery.fn.ImageAutoSize = function(width,height){    $("img",this).
896 0
文章
问答
文章排行榜
最热
最新
相关电子书
更多
QQ移动页面框架优化实践
立即下载
宏光S导航安装教程
立即下载
WEB浏览器中即将发生的安全变化
立即下载