利用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: '下一步 &rarr;',
            prevLabel: '&larr; 上一步',
            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.效果图
这里写图片描述
这里写图片描述
这里写图片描述
这里写图片描述

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
好的,下面是一个使用 Intro.js 生成引导页面的示例代码。这个示例中,我们将介绍如何创建一个简单的引导页面,并使用一些样式来美化它: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Intro.js 示例</title> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/intro.js/3.3.1/introjs.min.css"> <style> .introjs-tooltip { max-width: 400px; border-radius: 3px; box-shadow: 0 0 20px rgba(0,0,0,0.3); background-color: #fff; color: #333; } .introjs-arrow { border-top-color: #fff; } .introjs-tooltipbuttons { text-align: center; } .introjs-button { background-color: #e1e1e1; color: #333; border-radius: 3px; padding: 5px 10px; margin: 5px; cursor: pointer; } .introjs-button:hover { background-color: #d2d2d2; } .introjs-button:focus { outline: none; } </style> </head> <body> <h1>Intro.js 示例</h1> <p>这是一个使用 Intro.js 创建的引导页面示例。</p> <button id="startBtn">开始引导</button> <script src="https://cdnjs.cloudflare.com/ajax/libs/intro.js/3.3.1/intro.min.js"></script> <script> document.getElementById("startBtn").addEventListener("click", function() { introJs().setOptions({ steps: [ { element: document.querySelector('h1'), intro: "这是页面的标题。" }, { element: document.querySelector('p'), intro: "这是页面的主体内容。" }, { element: document.querySelector('#startBtn'), intro: "这是开始引导按钮。", position: 'bottom' } ], showBullets: false, exitOnOverlayClick: false, exitOnEsc: false }).start(); }); </script> </body> </html> ``` 在这个示例中,我们使用了一些 CSS 样式来美化 Intro.js 的工具提示框和按钮。我们还使用了 `setOptions()` 方法来设置引导页面参数选项,例如 `steps`、`showBullets`、`exitOnOverlayClick` 和 `exitOnEsc` 等。最后,我们在按钮的点击事件中调用 `introJs().start()` 方法启动引导页面。 你可以根据自己的需求调整这个示例代码,以生成自己的引导页面

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值