寫了一個web使用嚮導的小插件

運行效果：

 

引入插件：

<link rel="stylesheet" href="ez-guide.css">
<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
<script src="ez-guide.js"></script>

因爲是基於jq寫的，因此要引入jq環境。

 

調用方式：

(function($){

    // 定義提示數組
    // 每一個提示包括如下幾個屬性：
    //     x：提示框距離父容器左側的長度（left）
    //     y：提示框距離父容器頂部的長度（top）
    //     w：提示框的寬度（width）
    //     h：提示框的高度（height）
    //    desc：提示框的文字描述內容
    //     direction：提示框的文字描述顯示位置。可選值：bottom（下方，默認）；top（上方）；left（左側）；right（右側）
    var opts = [
        { x: 100, y: 50, w: 200, h: 100, desc: '點擊文章區域，查看詳細內容。', direction: 'bottom' },
        { x: 200, y: 80, w: 100, h: 50, desc: '有聲讀報。' }
    ];

    // 定義提示結束以後的回調函數，通常用於設置store或者cookie
    var callback = function(){
        store.set('guide', true);
    }

    // 調用提示框
    guide(opts, callback);

})(jQuery);

 

源碼：https://gitee.com/itez/ez-guide