driver.js实现页面新手引导层指引示例代码-html代码-BFW代码库

driver.js实现页面新手引导层指引示例代码

代码语言：html

代码描述：driver.js实现页面新手引导层指引示例代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">


    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/driver.min.css">
    <style>
        button{
          width:80px;
          height:30px;
        }
    </style>




</head>

<body translate="no">
    <h1 id="h1">这是步骤1</h1>
    <h2 id="h2">这是步骤2</h2>
    <h3 id="h3">这是步骤3</h3>

    <image src="//repo.bfw.wiki/bfwrepo/image/5e62ef20b92ee.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_400,h_300,/quality,q_90" alt="img" width=400px; id="iron"></image>
    <p>结束了哦</p>
    <button id="btn1">1</button>
    <button id="btn2">2</button>
    <button id="btn3">3</button>

    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/driver.min.js"></script>
    <script>
        //高亮单一元素
        let btn1 = document.querySelector("#btn1");
        console.log(btn1);
        btn1.onclick = function () {
          setTimeout(() => {
            const driver = new Driver();
            driver.highlight('h1');
          }, 50);
        };
        
        //高亮带弹出层
        let btn2 = document.getElementById("btn2");
        console.log(btn2);
        btn2.onclick = function () {
          setTimeout(() => {
            const driver = new Driver({
              //无遮罩
              // opacity:0,
            });
            driver.highlight({
              element: "#h2",
              popover: {
                title: "这是步骤二title",
                description: "这是步骤二的描述",
                position: 'bottom-center',
                closeBtnText: "关闭" } });
        
        
          }, 50);
        };
        
        //带步骤的高亮
        
        
        let btn3 = d.........完整代码请登录后点击上方下载按钮下载查看