jQuery插件pagewalkthrough实现引导页效果-js教程-PHP中文网

jQuery插件pagewalkthrough实现引导页效果

php中文网

发布： 2016-06-01 09:54:34

原创

1579人浏览过

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

jQuery插件pagewalkthrough实现引导页效果

html代码：

<code class="html"><html>
 <head></head>
 <body>
  <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>
 </body>
</html></code>

登录后复制

js文件和代码：

jQuery特效插件HoverSlippery实现导航超链接鼠标滑过动画

HoverSlippery是一款可以制作导航超链接鼠标滑过动画特效的jQuery插件。该插件可以制作4种鼠标滑过效果，分别是：胶囊跟随效果，双线跟随效果，下划线跟随效果和上划线跟随效果。

查看详情

<code class="javascript">< 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>/</code>

登录后复制

css文件：

<code class="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></code>

登录后复制

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