1.下载intro.min.js插件,可到官网自行下载,只需下载对应版本的js和css文件即可
下载链接为:http://www.bootcdn.cn/intro.js/
2.下面介绍下插件使用用法
JSP页面引用css和js文件
<link rel="stylesheet" type="text/css" href="${path}/css/introjs.min.css">
<script src="${path}/js/intro.min.js" type="text/javascript" charset="utf-8"></script>
<a style="color: white;padding-right: 5px" href="javascript:void(0)" onclick="guidance()">引导</a>
//js函数调用
function guidance() {
introJs().setOptions({
nextLabel: '下一步 →',
prevLabel: '← 上一步',
skipLabel: '跳过',
doneLabel: "完成",
exitOnOverlayClick:true,
exitOnEsc: true,
showBullets:true,
showButtons:true
}).start();
}
<ul id="dashboard-menu" style="margin-top: -60px">
<li data-step="1" data-position="right" data-intro="这是主要展示系统一些统计数据">
</li>
<li data-step="2" data-position="right" data-intro="这是系统功能">
</li>
<li data-step="3" data-position="right" data-intro="这是镜像功能">
</li>
</ul>
3.效果图