<ol id="zp1vr"><form id="zp1vr"><p id="zp1vr"></p></form></ol>

    <nobr id="zp1vr"><nobr id="zp1vr"><font id="zp1vr"></font></nobr></nobr>
    <pre id="zp1vr"></pre>
    <b id="zp1vr"></b>
    <dfn id="zp1vr"></dfn>
      <del id="zp1vr"><nobr id="zp1vr"></nobr></del>

      <em id="zp1vr"></em>

      15934152105

      網頁新手指引的html實現demo

      作者:木子天禾科技發布時間:2021-12-08 19:27:20

      最近實現一個網頁新手引導的功能,網上找到這樣一個案例,分享給大家。

      代碼如下:

      <!DOCTYPE html><html> <head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title>    <style>        * {            margin: 0;            padding: 0;        }         html,        body {            width: 100%;            height: 100%;        }         .main {            width: 100%;            height: 100%;            background-color: #f0f0f0;            overflow: hidden;        }         ul {            display: flex;            flex-wrap: wrap;        }         li {            list-style: none;            width: 300px;            height: 400px;            text-align: center;            background-color: #fff;            font-size: 20px;            position: relative;            margin: 20px;        }         li>div:nth-child(1) {            width: 300px;            height: 400px;            line-height: 400px;            position: absolute;        }         li>div:nth-child(2) {            width: 230px;            height: 25px;            line-height: 25px;            position: absolute;            right: 0;            bottom: -33px;            background-color: #fff;            border-radius: 5px;            cursor: pointer;            left: 135px;            display: none;        }         .center {            position: fixed;            left: 0;            top: 0;            width: 100%;            height: 100%;            background-color: rgba(0, 0, 0, 0.5);            z-index: 1;            display: none;        }    </style></head> <body>    <div>        <ul>            <li>                <div>這是列表一</div>                <div>                    <span>測試第一個數據</span>                    <span>第一步</span>                </div>            </li>            <li>                <div>這是列表四</div>                <div>                    <span>測試第四個數據</span>                    <span>第四步</span>                </div>            </li>            <li>                <div>這是列表二</div>                <div>                    <span>測試第二個數據</span>                    <span>第二步</span>                </div>            </li>            <li>                <div>這是列表三</div>                <div>                    <span>測試第三個數據</span>                    <span>第三步</span>                </div>            </li>        </ul>        <div>        </div>    </div>     <script>        let Mask = document.querySelector(".center")        let domlist = document.querySelectorAll("li")        console.log(Mask)        // 默認第一項展示        showDom(0)         // 設置元素的顯示        function showDom(index) {            Mask.style.display = "block"            domlist[index].children[1].style.display = "block"            domlist[index].style.zIndex = 5        }         // 設置元素的隱藏        function hideDom() {            Mask.style.display = "none"            for (let i = 0; i < domlist.length; i++) {                domlist[i].children[1].style.display = "none"                domlist[i].style.zIndex = 1            }        }         domClick()         // 點擊事件        function domClick() {            domlist[0].children[1].onclick = function () {                console.log("141")                hideDom()                showDom(2)            }             domlist[1].children[1].onclick = function () {                hideDom()            }             domlist[2].children[1].onclick = function () {                hideDom()                showDom(3)            }             domlist[3].children[1].onclick = function () {                hideDom()                showDom(1)            }        }    </script></body> </html>

      以上就是網頁新手指引的html實現demo的詳細內容,更多請關注木子天禾科技其它相關文章!

      分享:
      手机在线看写*真网站|天天操操操操操操操操操操操操操|免费好爽舒服高潮视频|亚洲黄色人成网站

      <ol id="zp1vr"><form id="zp1vr"><p id="zp1vr"></p></form></ol>

        <nobr id="zp1vr"><nobr id="zp1vr"><font id="zp1vr"></font></nobr></nobr>
        <pre id="zp1vr"></pre>
        <b id="zp1vr"></b>
        <dfn id="zp1vr"></dfn>
          <del id="zp1vr"><nobr id="zp1vr"></nobr></del>

          <em id="zp1vr"></em>