如果你细心的话，你就会发现有部分网站在升级或者注册后，会出现分步引导。引导我们如何使用网站。最常见的应该就是支付宝。那么支付宝是如何实现这样的功能的呢？今天我就为大家介绍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>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
