改版提示，新手指南

Posted on 2012-11-25 10:33  匆匆  阅读(280)  评论()    收藏  举报

/* ===========================================================
* 改版提示，新手指南
* ========================================================== */
(function($){
    var guideData = {
            show : false, //显示开关
            version : 'ddzVersion3.1',  //版本
            imageList : [{
                id :'guide1',
                url : 'http://www.sina.com/css/home/images/sprite.png',
                top : 4,
                left : 230,
                closeMap : '505,117,12',
                nextMap :'0,0,274,77'
            },{
                id :'guide2',
                url : 'http://www.sina.com/css/home/images/sprite.png',
                top : 200,
                left : 23,
                closeMap : '505,117,12',
                nextMap :'0,0,274,77'
            },{
                id :'guide3',
                url : 'http://www.sina.com/css/home/images/sprite.png',
                top : 1,
                left : 127,
                closeMap : '0,0,932,474',
                nextMap :'0,0,0,0'
            }]
    };
    //localDataStore.remove(guideData.version)
    if((guideData.show == true) && (guideData.imageList.length > 0) && (localDataStore.get(guideData.version) == null)){
        initGuide();
    }
    function initGuide(){
        var list = guideData.imageList,len = list.length, listHtml = '';
        for(var i = 0;i < len; i ++ ){
            var temp = list[i],id = temp.id,url = temp.url, closeMap = temp.closeMap , nextMap = temp.nextMap;
            listHtml += '<div class="' + id + (i == 0 ? " guide-active" : " hide") + '">' +
                            '<img src="' + url + '" usemap="#' + id +'">' +
                            '<map id="#' + id + '" name="' + id + '">' +
                                '<area title="关闭" class="clz_btn" shape="circle" coords="' + closeMap +'" href="javascript:void(0);">' +
                                '<area title="下一条" class="next_btn" shape="rect" coords="' + nextMap +'" href="javascript:void(0);">' +
                            '</map>' +
                        '</div>';
        }
        var template = '<div id="J_VersionOverlayer" class="version-overlayer">' +
                            '<div class="over-bg"></div>' +
                            '<div class="over-fg">' + listHtml +
                            '</div>' +
                        '</div>';
        $('body').append(template);
        $('#J_VersionOverlayer').height($(document).height());
        resetGuide();
        $(window).resize(function(){
            resetGuide();
        });
        $('#J_VersionOverlayer .over-fg').find('.next_btn').click(function(){
            $('.guide-active').hide().removeClass('guide-active').next().removeClass('hide').fadeIn(200).addClass('guide-active');
        });
        $('#J_VersionOverlayer .over-fg').find('.clz_btn').click(function(){
            localDataStore.set(guideData.version);
            $('#J_VersionOverlayer').remove();
        });    
    }
    function resetGuide(){
        var left = $('.mod-top-bd').offset().left , top = $('.mod-top-bd').offset().top , list = guideData.imageList;
        for(var i = 0; i < list.length ; i ++){
            $('.' + list[i].id).css({left:left + list[i].left, top:top + list[i].top});
        }
    };    
})(jQuery);