新手指导插件.配合jquery使用

Posted 2020-09-23 MauriceChans

/*!
* by zhangxinxu(.com) 2017-05-18
* 新版上线时候的黑色半透明镂空遮罩指引效果实现jQuery小插件
* 兼容到IE8+
* MIT使用协议，使用时候保留版权
* 参考：http://www.zhangxinxu.com/wordpress/?p=6171
*/

$.guide = function (options) {
    var defaults = {
        beforeFunc:function(a){a();},//执行向导前要处理的函数
        clickFunc:function(){},
        selector: ‘‘,  // 页面提示元素选择器物，会使用匹配的第一个元素
        content: ‘‘,  // 提示内容可是是字符串，也可以是jQuery包装器对象
        align: ‘center‘, // center, right,
        offset: {
            x: 0,
            y: 0
        }
    };
    // options格式
    /* [{
        selector: ‘‘,  
        content: ‘‘,
        align: ‘left‘,
        offset: {
            x: 0,
            y: 0
        }
    }]

    */

    var urlRoot = location.href.split(‘#‘)[0].replace(/\W/g, ‘‘) + ‘Guide‘;

    // 如果要调试，最后的== ‘1‘改成‘2‘就好了
    if (!window.localStorage || !options || !$.isArray(options) || localStorage[urlRoot] == ‘2‘) {
        return;
    }


    var elGuideOverlay = $(‘#guideOverlay‘);
    var elGuideShut = $(‘#guideShut‘);
    var elGuide = $(‘#guideOverlap‘);

    var start = 0;

    var remove = function () {
        elGuideOverlay.remove();
        elGuideShut.remove();
        elGuide.remove();
        // 键盘事件移除
        $(document).off(‘keydown.guide‘);
        $(window).off(‘resize.guide‘);
    };
    var goto = function (change) {
        start = start + change;
        if (start < 0) {
            start = 0;
        }
        if (!options[start]) {
            remove();
            return;
        }

        var data = $.extend({}, defaults, options[start]);
        
        //回调的时候才开启遮罩
        $(‘#guideOverlap‘).css({boxShadow: ‘0 0 0 9999px rgba(0,0,0,.75)‘});
        // 获取元素
        var elTrigger = $(data.selector).eq(0);
        if (elTrigger.length == 0 && change && data.selector!=‘‘) {
            goto(change);
            return;
        }

        // 装载对应提示内容
        elGuide.empty();

        var elGuideContent = $(‘<div></div>‘).css({
            //display: ‘none‘,
            position: ‘absolute‘,
        }).append(data.content);

        elGuide.append(elGuideContent);

        // 定位
        
        if(elTrigger.length > 0){
            elGuide.css({
                width:elTrigger.outerWidth(),
                height: elTrigger.outerHeight(),
                left: elTrigger.offset().left || ‘0%‘,
                top: elTrigger.offset().top || ‘50%‘
            });
        }else{
            elGuide.css({
                width:0,
                height:0,
                left: ‘0%‘,
                top: ‘35%‘
            });
        }
        // 提示内容定位
        elGuideContent.css({
            top: elTrigger.outerHeight() - 5 + data.offset.y
        });

        if (data.align == ‘left‘) {
            elGuideContent.css({
                left: data.offset.x
            });
        } else if (data.align == ‘right‘) {
            elGuideContent.css({
                right: data.offset.x
            });
        } else {
            elGuideContent.css({
                left: (elTrigger.outerWidth() - elGuideContent.width()) / 2 + data.offset.x
            });
        }
        
        setTimeout(function () {
            elGuideContent.show();
        }, history.pushState? 100: 0);
        


    };

    if (!elGuideOverlay.length) {
        elGuideOverlay = $(‘<a id="guideOverlay" href="javascript:" role="button"></a>‘).css({
            position: ‘fixed‘,
            left: 0,
            top: 0,
            right: 0,
            bottom: 0,
            background: ‘url(about:blank)‘,
            zIndex: 99,
            outline: ‘none‘
        });
        
        if (history.pushState) {
            elGuideOverlay.css(‘background‘, ‘linear-gradient(to top, transparent, transparent)‘);    
        }

        elGuideShut = $(‘<a href="javascript:" id="guideShut" role="button">跳过</a>‘).css({
            position: ‘fixed‘,
            top: 10,
            right: 10,
            color: ‘#fff‘,
            zIndex: 10000
        });;

        elGuide = $(‘<div id="guideOverlap"></div>‘).css({
            position: ‘absolute‘,
            transition: ‘all .3s‘,
            //boxShadow: ‘0 0 0 9999px rgba(0,0,0,.75)‘,
            // 如果想支持圆角，下面的注释
            // borderRadius: ‘50%‘,
            zIndex: 10000,
        });
        
        if (![].map) {
            // IE8浏览器
            elGuide.css(‘outline‘, ‘9999px solid #000‘).css(‘filter‘, ‘alpha(opacity=75)‘);
        }

        

        $(document.body).append(elGuideOverlay).append(elGuide).append(elGuideShut);

        // 事件
        elGuideShut.on(‘click‘, function () {
            remove();
        });

        // 翻页
        elGuide.on({
            click: function () {
                //关闭遮罩
                $(‘#guideOverlap‘).css({boxShadow: ‘none‘});
                $(‘#guideOverlap‘).html(‘‘);
                if(options[start]){
                    options[start].clickFunc();
                }
                
                if(options[start+1]){
                    options[start+1].beforeFunc(function(){
                        goto(1);
                    });
                }else{console.log(‘======‘+options[start+1]);
                    goto(1);
                }
            }
        });

        // $(document).on(‘keydown.guide‘, function (event) {
        //     var keycode = {
        //         37: ‘left‘,
        //         38: ‘up‘,
        //         39: ‘right‘,
        //         40: ‘down‘,
        //         27: ‘esc‘
        //     };

        //     switch (keycode[event.keyCode]) {
        //         case ‘esc‘: {
        //             remove();
        //             break;
        //         }
        //         case ‘up‘: case ‘left‘: {
        //             goto(-1);
        //             event.preventDefault();
        //             break;
        //         }
        //         case ‘right‘: case ‘down‘: {
        //             goto(1);
        //             event.preventDefault();
        //             break;
        //         }
        //     }
        // });
        
        $(window).on(‘resize.guide‘, function () {
            //goto(0);
        });
    }
    options[0].beforeFunc(function(){
        goto(0);
    });
    
    
    //elGuideOverlay[0].focus();

    localStorage[urlRoot] = ‘1‘;
};

使用案例

 $.guide([{
      beforeFunc:e,//执行前触发,必须是一个带回调的函数
      clickFunc:e,//执行时触发,必须是一个待回调的函数
      selector: ‘‘,
      content: ‘<img src="http://a326.sdsfshop.com/addons/ewei_shop/static/images/xinshou/1.png" style="width: 30rem;">‘,
      align: ‘left‘
 },{
      beforeFunc:e,
      clickFunc:e,
      selector: ‘‘,
      content: ‘<img src="http://a326.sdsfshop.com/addons/ewei_shop/static/images/xinshou/2.png" style="width: 30rem;">‘,
      align: ‘left‘
}])

function e(callback){
　　if(callback){
　　　　callback();
　　}
}

function func1(callback){
　　$(‘#wrapper‘).before(‘<div class="zhidao"></div>‘);
　　$(‘.zhidao‘).animate({‘height‘:‘12%‘},{
　　　　duration:3000,
　　　　step:function(){
　　　　},
　　　　complete:function(){
　　　　if(callback){
　　　　　　callback();
　　　　}
　　}
　　});
}