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的詳細內容,更多請關注木子天禾科技其它相關文章!

分享:
亚洲AV超清不卡在线网络