写了一个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