最近給網站做新手引導，于是封裝了一個簡易的小插件。

線上Demo

示例代碼：

<div id="box_1" style="width:90px;height:90px;background:red;margin: 30px;"></div> <div id="box_2" style="width:60px;height:120px;background:green;margin: 30px;"></div><script src="https://unpkg.com/guide-tips/dist/guide-tips.min.js"></script> <script>const gt = new GuideTips({guideList: [{els: ["#box_1"],title: "step1",context: "This is step one"},{els: ["#box_2"],title: "step2",context: "This is step two"}]});gt.begin(); </script>

npm 安裝

npm install guide-tips

cdn地址

https://unpkg.com/guide-tips/dist/guide-tips.min.js

源碼及文檔：github

總結

以上是生活随笔為你收集整理的网站新手引导/步骤引导的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。