使用tour对网站进行分步引导

HTML5 herman 3250浏览 0评论
公告:“业余草”微信公众号提供免费CSDN下载服务(只下Java资源),关注业余草微信公众号,添加作者微信:xttblog,发送下载链接帮助你免费下载!
本博客日IP超过1800,PV 2600 左右,急需赞助商。
极客时间所有课程通过我的二维码购买后返现24元微信红包,请加博主新的微信号:xttblog,之前的微信号好友位已满,备注:返现
所有面试题(java、前端、数据库、springboot等)一网打尽,请关注文末小程序
视频教程免费领

如果你细心的话,你就会发现有部分网站在升级或者注册后,会出现分步引导。引导我们如何使用网站。最常见的应该就是支付宝。那么支付宝是如何实现这样的功能的呢?今天我就为大家介绍bootstrap-tour插件来揭开它的面纱。运行效果如下:

代码如下:

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>使用tour对网站进行分步引导</title>
	<link href="http://cdn.gbtags.com/bootstrap-tour/0.9.0/css/bootstrap-tour-standalone.min.css" rel="stylesheet">
	<script src="http://cdn.gbtags.com/jquery/1.11.1/jquery.min.js"></script>
	<script src="http://cdn.gbtags.com/bootstrap-tour/0.9.0/js/bootstrap-tour-standalone.js"></script>
	<style type="text/css">
		body{ 
			background: #f5faff;
		}
		.demo_con{
			width: 960px;
			margin:40px auto 0;
		}
		.button{
			width: 140px;
			line-height: 38px;
			text-align: center;
			font-weight: bold;
			color: #fff;
			text-shadow:1px 1px 1px #333;
			border-radius: 5px;
			margin:0 20px 20px 0;
			position: relative;
			overflow: hidden;
		}
		.button:nth-child(5n){
			margin-right: 0;
		}
		.button.gray{
			color: #8c96a0;
			text-shadow:1px 1px 1px #fff;
			border:1px solid #dce1e6;
			box-shadow: 0 1px 2px #fff inset,0 -1px 0 #a8abae inset;
			background: -webkit-linear-gradient(top,#f2f3f7,#e4e8ec);
			background: -moz-linear-gradient(top,#f2f3f7,#e4e8ec);
			background: linear-gradient(top,#f2f3f7,#e4e8ec);
		}
		.button.black{
			border:1px solid #333;
			box-shadow: 0 1px 2px #8b8b8b inset,0 -1px 0 #3d3d3d inset,0 -2px 3px #8b8b8b inset;
			background: -webkit-linear-gradient(top,#656565,#4c4c4c);
			background: -moz-linear-gradient(top,#656565,#4a4a4a);
			background: linear-gradient(top,#656565,#4a4a4a);
		}
		.button.red{
			border:1px solid #b42323;
			box-shadow: 0 1px 2px #e99494 inset,0 -1px 0 #954b4b inset,0 -2px 3px #e99494 inset;
			background: -webkit-linear-gradient(top,#d53939,#b92929);
			background: -moz-linear-gradient(top,#d53939,#b92929);
			background: linear-gradient(top,#d53939,#b92929);
		}
		.button.yellow{
			border:1px solid #d2a000;
			box-shadow: 0 1px 2px #fedd71 inset,0 -1px 0 #a38b39 inset,0 -2px 3px #fedd71 inset;
			background: -webkit-linear-gradient(top,#fece34,#d8a605);
			background: -moz-linear-gradient(top,#fece34,#d8a605);
			background: linear-gradient(top,#fece34,#d8a605);
		}
		.button.green{
			border:1px solid #64c878;
			box-shadow: 0 1px 2px #b9ecc4 inset,0 -1px 0 #6c9f76 inset,0 -2px 3px #b9ecc4 inset;
			background: -webkit-linear-gradient(top,#90dfa2,#84d494);
			background: -moz-linear-gradient(top,#90dfa2,#84d494);
			background: linear-gradient(top,#90dfa2,#84d494);
		}
		.button.blue{
			border:1px solid #1e7db9;
			box-shadow: 0 1px 2px #8fcaee inset,0 -1px 0 #497897 inset,0 -2px 3px #8fcaee inset;
			background: -webkit-linear-gradient(top,#42a4e0,#2e88c0);
			background: -moz-linear-gradient(top,#42a4e0,#2e88c0);
			background: linear-gradient(top,#42a4e0,#2e88c0);
		}
	</style>
</head>
<body>
	<div class="page">
		<section class="demo">
			<div class="demo_con">
			 
				<button type="button" class="button gray" id="btn0">第1步</button>
				<button type="button" class="button black" id="btn1">第2步</button>
				<button type="button" class="button red" id="btn2">第3步</button>
				<button type="button" class="button yellow" id="btn3">第4步</button>
				<button type="button" class="button green" id="btn4">第5步</button>
				<button type="button" class="button blue" id="btn5">第6步</button>
			 
				<button type="button" class="button gray" id="btn6">第7步</button>
				<button type="button" class="button black" id="btn7">第8步</button>
				<button type="button" class="button red"  id="btn8">第9步</button>
				<button type="button" class="button yellow"  id="btn9">第10步</button>
				<button type="button" class="button green"  id="btn10">第11步</button>
				<button type="button" class="button blue"  id="btn11">第12步</button>
			 
				<button type="button" class="button gray"  id="btn12">第13步</button>
				<button type="button" class="button black"  id="btn13">第14步</button>
				<button type="button" class="button red"  id="btn14">第15步</button>
				<button type="button" class="button yellow"  id="btn15">第16步</button>
				<button type="button" class="button green"  id="btn16">第17步</button>
				<button type="button" class="button blue"  id="btn17">第18步</button>
			 
				<button type="button" class="button gray">第19步</button>
				<button type="button" class="button black">第20步</button>
				<button type="button" class="button red">第21步</button>
				<button type="button" class="button yellow">第22步</button>
				<button type="button" class="button green">第23步</button>
				<button type="button" class="button blue">第24步</button>
				<button type="button" class="button gray">第25步</button>
			</div>	
		</section>
	</div>
    <script type="text/javascript">
	    $(document).ready(function(){			
	    	var tour = new Tour({
	    		storage: false,//可选参数:window.localStorage(缺省), window.sessionStorage ,false 或者自定义obj
	    		debug:false,//是否调试,默认为false
				steps: [
					{element: "#btn0",title: "提示0",content: "内容0"},
					{element: "#btn1",title: "提示1",content: "内容1"},
					{element: "#btn2",title: "提示2",content: "内容2"},
					{element: "#btn3",title: "提示3",content: "内容3"},
					{element: "#btn4",title: "提示4",content: "内容4"},
					{element: "#btn5",title: "提示5",content: "内容5"},
					{element: "#btn6",title: "提示6",content: "内容6"},
					{element: "#btn7",title: "提示7",content: "内容7"},
					{element: "#btn8",title: "提示8",content: "内容8"},
					{element: "#btn9",title: "提示9",content: "内容9"},
					{element: "#btn10",title: "提示10",content: "内容10"},
					{element: "#btn11",title: "提示11",content: "内容11"},
					{element: "#btn12",title: "提示12",content: "内容12"},
					{element: "#btn13",title: "提示13",content: "内容13"},
					{element: "#btn14",title: "提示14",content: "内容14"},
					{element: "#btn15",title: "提示15",content: "内容15"},
					{element: "#btn16",title: "提示16",content: "内容16"},
					{element: "#btn17",title: "提示17",content: "内容17"},
					{element: "#btn18",title: "提示18",content: "内容18"},
					{element: "#btn19",title: "提示19",content: "内容19"},
					{element: "#btn20",title: "提示20",content: "内容20"},
					{element: "#btn21",title: "提示21",content: "内容21"},
					{element: "#btn22",title: "提示22",content: "内容22"},
					{element: "#btn23",title: "提示23",content: "内容23"},
					{element: "#btn24",title: "提示24",content: "内容24"},
					{element: "#btn25",title: "提示25",content: "内容25"}
				],
			  	//操作模板
			  	template:"<div class='popover'><div class='arrow'></div><h3 class='popover-title'></h3><div class='popover-content'></div><div class='popover-navigation'>" +
			  	"<div class='btn-group'><button class='btn btn-sm btn-default' data-role='prev'>« 上一步</button><button class='btn btn-sm btn-default' data-role='next'>下一步 »</button>" +
			  	"<button class='btn btn-sm btn-default' data-role='pause-resume' data-pause-text='Pause' data-resume-text='Resume'>暂停</button></div><button class='btn btn-sm btn-default' data-role='end'>知道了</button></div></div>"
			});
	    	//打印出对象,可以设置更多属性,包括键盘控制,箭头指向等
	    	console.log(tour);
			tour.init();
			tour.start();
			//分步引导框架还有很多,如:TourTip、Intro.js、aSimpleTour、pageguide.js、Joyride、WEBSITE TOUR、Bootstro.js、Bootstrap Tour、、jQuery Site Tour、jQuery TourBus、Trip.js、Crumble等
	    });
    </script>
</body>
</html>

业余草公众号

最后,欢迎关注我的个人微信公众号:业余草(yyucao)!可加QQ1群:135430763(2000人群已满),QQ2群:454796847(已满),QQ3群:187424846(已满)。QQ群进群密码:xttblog,想加微信群的朋友,之前的微信号好友已满,请加博主新的微信号:xttblog,备注:“xttblog”,添加博主微信拉你进群。备注错误不会同意好友申请。再次感谢您的关注!后续有精彩内容会第一时间发给您!原创文章投稿请发送至532009913@qq.com邮箱。商务合作可添加助理微信进行沟通!

本文原文出处:业余草: » 使用tour对网站进行分步引导