智能新手教程指引器～～～～

Question

朋友让我注册白社会，类似开心网校内网的SNS社区。刚注册进去有一个新手教程指引。看了效果挺好。于是就自己写了个效果图如下：插件代码：
(function($) {
    Tutorial = {
        fade_speed: 2000,
        stopTime: 4500,
        setTime: [],
        _custom_timer: 0,
        _tpl_top_close: '<div class="TutorialArrow TutorialArrowBottom">\
                    <div class="line1"><!-- --></div>\
                    <div class="line2"><!-- --></div>\
                    <div class="line3"><!-- --></div>\
                    <div class="line4"><!-- --></div>\
                    <div class="line5"><!-- --></div>\
                    <div class="line6"><!-- --></div>\
                    <div class="line7"><!-- --></div>\
                    <div class="line8"><!-- --></div>\
                    <div class="line9"><!-- --></div>\
                    <div class="line10"><!-- --></div>\
                </div>',
        _tpl_bom_close: '<div class="TutorialArrow">\
                    <div class="line10"><!-- --></div>\
                    <div class="line9"><!-- --></div>\
                    <div class="line8"><!-- --></div>\
                    <div class="line7"><!-- --></div>\
                    <div class="line6"><!-- --></div>\
                    <div class="line5"><!-- --></div>\
                    <div class="line4"><!-- --></div>\
                    <div class="line3"><!-- --></div>\
                    <div class="line2"><!-- --></div>\
                    <div class="line1"><!-- --></div>\
                </div>',
        _tpl_item: '<div class="TutorialContent">\
                <span>[[title]]</span>\
                <p>[[text]]</p>\
                <div><a href="javascript:;">我知道了</a></div>\
            </div>',
        _tpl_wrap: '<div id="Tutorial-wrapper" class="Tutorial blackPopup"></div>',
        add: function(options, params) {            if (!this.verifyWrapper())
                return;
            Tutorial.stopTime = params.stopTime;
            var tmp = this._tpl_item;
            this._item_count++;            this._custom_timer = 0;            if (params.fadeOutTime) {
                this._custom_timer = params.fadeOutTime;
            }            Tutorial.moveTo(options, params);
        },
        insertHtml: function(obj, tmp, params, options, len) {            tmp = this.str_replace(
            ['[[title]]', '[[text]]'],
            [obj.title, obj.text], tmp
        );            var wrapper = $('#Tutorial-wrapper');
            var offset = $(obj.moveTo).offset();
            var body = $(window);
            
            wrapper.empty().append(tmp);
            if (offset.top > wrapper.height()) {
                wrapper.append(Tutorial._tpl_bom_close).fadeIn();
            } else {
                $('.TutorialContent').before(Tutorial._tpl_top_close).fadeIn();
            }            $('.TutorialArrow')
            .hide()
            .css('left', offset.left + wrapper.width() > body.width() ? 20 : 190)
            .show()
            .animate({ left: offset.left + wrapper.width() > body.width() ? 190 : 20 });            wrapper.animate({
                left: offset.left + wrapper.width() > body.width() ? offset.left - wrapper.width() + $(obj.moveTo).width() - 10 : offset.left + 10,
                top: offset.top > wrapper.height() ? offset.top - wrapper.height() - 5 : offset.top + 20
            }, 1500, function() {
                if (options.length == len + 1) {
                    window.setTimeout(function() {
                        $('.TutorialArrow').remove();
                        wrapper.animate({
                            left: ($(window).width() - wrapper.width()) / 2, top: ($(window).height() - wrapper.height()) / 2
                        }, 1500, function() {
                            Tutorial.stop();
                        });
                    }, Tutorial.stopTime);
                }
            });
            $('.TutorialContent div a').click(function() {
                Tutorial.stop();
            })
        },
        moveTo: function(options, params) {
            $.each(options, function(i) {
                Tutorial.setTime[i] = setTimeout(function() { Tutorial.insertHtml(options[i], Tutorial._tpl_item, params, options, i); }, Tutorial.stopTime * i);
            })
        },
        fade: function(e) {            $(e).animate({
                opacity: 0
            }, Tutorial.fade_speed, function() {
                $(e).animate({ height: 0 }, 300, function() {
                    $(e).remove();
                })
            })        },
        remove: function(e) {            $(e).parents('.TutorialContent').fadeOut('medium', function() { $(this).remove(); });        },
        stop: function() {
            Tutorial.fade($('#Tutorial-wrapper'));            $.each(Tutorial.setTime, function(i) {
                window.clearTimeout(Tutorial.setTime[i]);
            });
        },
        str_replace: function(search, replace, subject, count) {            var i = 0, j = 0, temp = '', repl = '', sl = 0, fl = 0,
            f = [].concat(search),
            r = [].concat(replace),
            s = subject,
            ra = r instanceof Array, sa = s instanceof Array;
            s = [].concat(s);
            if (count) {
                this.window[count] = 0;
            }            for (i = 0, sl = s.length; i < sl; i++) {
                if (s[i] === '') {
                    continue;
                }
                for (j = 0, fl = f.length; j < fl; j++) {
                    temp = s[i] + '';
                    repl = ra ? (r[j] !== undefined ? r[j] : '') : r[0];
                    s[i] = (temp).split(f[j]).join(repl);
                    if (count && s[i] !== temp) {
                        this.window[count] += (temp.length - s[i].length) / f[j].length;
                    }
                }
            }
            return sa ? s : s[0];        },
        verifyWrapper: function() {
            if ($('#Tutorial-wrapper').length != 0) {
                return false;
            } else {
                $('body').append(this._tpl_wrap);
                return true;
            }
        }
    };
    $.tutorial = {};
    $.tutorial.add = function(options, params) {
        try {
            if (options.length == 0) {
                throw 'Missing_Fields';
            }
        } catch (e) {
            alert('Error:需要填写最起码1项数据');
        }
        if (typeof params === 'undefined')
            params = {};
        var id = Tutorial.add(options,
            {
                fadeOutTime: params.fadeOutTime || '',
                stopTime: params.stopTime || 4500
            }
);        return id;
    }
    $.tutorial.remove = function(id, params) {
        Tutorial.removeSpecific(id, params || '');
    }    $.tutorial.removeAll = function() {
        Tutorial.stop();
    }
})(jQuery);
 完整代码下载地址