利用intro.min.js插件实现用户页面引导

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.效果图
这里写图片描述
利用intro.min.js插件实现用户页面引导_第1张图片
利用intro.min.js插件实现用户页面引导_第2张图片
利用intro.min.js插件实现用户页面引导_第3张图片

你可能感兴趣的:(web前端)