js 网站顶部通用导航

js代码：

(function (scriptId, styleVersion) {

                var hotgameData = {
                'title': '热门游戏',
                'list': [
                {'text': '星座召唤', 'status':'', 'href': 'http://xzzh.xiaoyou-game.com','img': 'http://att1.niucdn.com/woniu.com/2015/0513/df26a116d64062121f3a707c9d63ac44c18b6c7b.jpeg'}
                ,{'text': '风暴神域', 'status':'', 'href': 'http://fbsy.xiaoyou-game.com/web/list/test.shtml','img': 'http://att1.niucdn.com/woniu.com/2015/0513/afe0639a92437a9e23d81d1aa7a85fa37e2db1bf.jpeg'}
                ]
                };

                gameHtml = '<div class="xy-gamehead-hotgame"><div class="xy-gamehead-hotgametitle">'+hotgameData['title']+'</div><div class="xy-gamehead-clearfix">';
                for (var i=0; i<hotgameData['list'].length; i++) {
                    gameHtml += '<a title="'+hotgameData['list'][i]['text']+'" class="xy-gamehead-hotgameli" href="'+hotgameData['list'][i]['href']+'" target="_self"><img alt="'+hotgameData['list'][i]['text']+'" src="'+hotgameData['list'][i]['img']+'">'+hotgameData['list'][i]['text']+'</a>';
                }
                gameHtml += '</div></div>';
                                                                              
                                                            
                loginHtml = '<li >'+data.value+'<em>|</em></li><li><a class="xy-gamehead-navbtn" href="">注销</a></li>';
                    

                var gameheadHtml = [
                '<div class="xy-gamehead">',
                    '<div class="xy-gamehead-contain">',
                        '<div class="xy-gamehead-nav">',
                            '<ul>',
                                loginHtml,      
                                    '<div class="xy-gamehead-navlayermask"></div>',
                                '<li>',
                                    '<a title="逍游天下游戏" class="xy-gamehead-navbtn" href="http://xiaoyou-game.com/" target="_self"><i></i>逍游天下游戏<em></em></a>',
                                    '<div class="xy-gamehead-navlayer xy-gamehead-gamelayer">',
                                        gameHtml,
                                    '</div>',
                                    '<div class="xy-gamehead-navlayermask"></div>',
                                '</li>',
                                '<li>',
                                    '<a title="用户中心" class="xy-gamehead-navbtn" href="" target="_self">用户中心</a>',
                                    '<div class="xy-gamehead-navlayermask"></div>',
                                '</li>',
                            '</ul>',
                        '</div>',
                    '</div>',
                '</div>'];


                // 插入头部DOM结构
                function createHeadFn(){
                    var pageBody = document.body;
                    var headObj = document.getElementById('j-xy-gamehead');
                    if (!headObj) {
                        headObj = document.createElement("div");
                        headObj.id = 'j-xy-gamehead';
                        pageBody.insertBefore(headObj, pageBody.firstChild);
                    }
                    headObj.innerHTML = gameheadHtml.join('');   
                    // 二级菜单交互
                    var navLi = headObj.getElementsByTagName('li');
                    for (var i=0; i<navLi.length; i++) {
                        navLi[i].onmouseover = function(){
                            if (this.className != 'current') {
                                this.className = 'current';
                                var layerObj, maskObj;
                                var navLiDiv = this.getElementsByTagName('div');
                                var listObjArray = [];
                                    for (var j=0; j<navLiDiv.length; j++) {
                                    var classNames = navLiDiv[j].className.split(' ');
                                    for (var k=0; k<classNames.length; k++) {
                                        if (classNames[k] == 'xy-gamehead-navlayer') {layerObj = navLiDiv[j];}
                                        if (classNames[k] == 'xy-gamehead-navlayermask') {maskObj = navLiDiv[j];}
                                        if (classNames[k] == 'xy-gamehead-navlayer-list') {
                                            listObjArray.push(navLiDiv[j]);
                                        }
                                    }
                                }
                                if (layerObj && maskObj && maskObj.offsetWidth == 0) {
                                    var listHeight = 0;
                                    for (var j=0; j<listObjArray.length; j++) {
                                        if (listObjArray[j].clientHeight > listHeight) {listHeight = listObjArray[j].clientHeight;}
                                    }
                                    for (var j=0; j<listObjArray.length; j++) {
                                        listObjArray[j].style.height = (listHeight - 10) + 'px';
                                    }
                                    maskObj.style.width = layerObj.offsetWidth + 'px';
                                    maskObj.style.height = layerObj.offsetHeight + 'px';
                                }
                            }
                        };
                        if ('onmouseleave' in navLi[i]) {
                            navLi[i].onmouseleave = function(event){
                                this.className = '';
                            };
                        } else {
                            navLi[i].onmouseout = function(event){
                                this.className = '';
                            };
                        }
                    }
                    
                }

                // 创建引入样式文件
                var gameheadCssHref = 'abc.css';
                var pageHead = document.getElementsByTagName('head')[0],
                gameheadCss = document.createElement('link');
                gameheadCss.setAttribute('rel', 'stylesheet');
                gameheadCss.setAttribute('type', 'text/css');
                gameheadCss.setAttribute('href', gameheadCssHref );

                  gameheadCss.onload = function(){
                    createHeadFn();
                  };
                  gameheadCss.onerror = function(){
                    if (window.console) {console.log(gameheadCssHref + '加载失败');}
                  };
                  var userAgent = navigator.userAgent.toLowerCase();
                  if (userAgent.indexOf('windows') > -1 && userAgent.indexOf('chrome') < 0 && userAgent.indexOf('safari') > -1) {
                    function poll(){
                      if (gameheadCss['sheet']) {
                        createHeadFn();
                      } else {
                        setTimeout(poll, 1);
                      }
                    }
                    setTimeout(poll, 0);
                  }

                pageHead.appendChild(gameheadCss);

                })('xy-gamehead', '3.0.2');

登陆之后显示用户名，未登录显示登录与注册。

$.ajax({
      url:'aaa',
      async: true, 
      type:"get",
      dataType:'json',
      success:function(data,status){                                
        if(data.key == 1){
            (function (scriptId, styleVersion) {

                var hotgameData = {
                'title': '热门游戏',
                'list': [
                {'text': '星座召唤', 'status':'', 'href': 'http://xzzh.xiaoyou-game.com','img': 'http://att1.niucdn.com/woniu.com/2015/0513/df26a116d64062121f3a707c9d63ac44c18b6c7b.jpeg'}
                ,{'text': '风暴神域', 'status':'', 'href': 'http://fbsy.xiaoyou-game.com/web/list/test.shtml','img': 'http://att1.niucdn.com/woniu.com/2015/0513/afe0639a92437a9e23d81d1aa7a85fa37e2db1bf.jpeg'}
                ]
                };

                gameHtml = '<div class="xy-gamehead-hotgame"><div class="xy-gamehead-hotgametitle">'+hotgameData['title']+'</div><div class="xy-gamehead-clearfix">';
                for (var i=0; i<hotgameData['list'].length; i++) {
                    gameHtml += '<a title="'+hotgameData['list'][i]['text']+'" class="xy-gamehead-hotgameli" href="'+hotgameData['list'][i]['href']+'" target="_self"><img alt="'+hotgameData['list'][i]['text']+'" src="'+hotgameData['list'][i]['img']+'">'+hotgameData['list'][i]['text']+'</a>';
                }
                gameHtml += '</div></div>';
                                                                              
                                                            
                loginHtml = '<li >'+data.value+'<em>|</em></li><li><a class="xy-gamehead-navbtn" href="">注销</a></li>';
                    

                var gameheadHtml = [
                '<div class="xy-gamehead">',
                    '<div class="xy-gamehead-contain">',
                        '<div class="xy-gamehead-nav">',
                            '<ul>',
                                loginHtml,      
                                    '<div class="xy-gamehead-navlayermask"></div>',
                                '<li>',
                                    '<a title="逍游天下游戏" class="xy-gamehead-navbtn" href="http://xiaoyou-game.com/" target="_self"><i></i>逍游天下游戏<em></em></a>',
                                    '<div class="xy-gamehead-navlayer xy-gamehead-gamelayer">',
                                        gameHtml,
                                    '</div>',
                                    '<div class="xy-gamehead-navlayermask"></div>',
                                '</li>',
                                '<li>',
                                    '<a title="用户中心" class="xy-gamehead-navbtn" href="" target="_self">用户中心</a>',
                                    '<div class="xy-gamehead-navlayermask"></div>',
                                '</li>',
                            '</ul>',
                        '</div>',
                    '</div>',
                '</div>'];


                // 插入头部DOM结构
                function createHeadFn(){
                    var pageBody = document.body;
                    var headObj = document.getElementById('j-xy-gamehead');
                    if (!headObj) {
                        headObj = document.createElement("div");
                        headObj.id = 'j-xy-gamehead';
                        pageBody.insertBefore(headObj, pageBody.firstChild);
                    }
                    headObj.innerHTML = gameheadHtml.join('');   
                    // 二级菜单交互
                    var navLi = headObj.getElementsByTagName('li');
                    for (var i=0; i<navLi.length; i++) {
                        navLi[i].onmouseover = function(){
                            if (this.className != 'current') {
                                this.className = 'current';
                                var layerObj, maskObj;
                                var navLiDiv = this.getElementsByTagName('div');
                                var listObjArray = [];
                                    for (var j=0; j<navLiDiv.length; j++) {
                                    var classNames = navLiDiv[j].className.split(' ');
                                    for (var k=0; k<classNames.length; k++) {
                                        if (classNames[k] == 'xy-gamehead-navlayer') {layerObj = navLiDiv[j];}
                                        if (classNames[k] == 'xy-gamehead-navlayermask') {maskObj = navLiDiv[j];}
                                        if (classNames[k] == 'xy-gamehead-navlayer-list') {
                                            listObjArray.push(navLiDiv[j]);
                                        }
                                    }
                                }
                                if (layerObj && maskObj && maskObj.offsetWidth == 0) {
                                    var listHeight = 0;
                                    for (var j=0; j<listObjArray.length; j++) {
                                        if (listObjArray[j].clientHeight > listHeight) {listHeight = listObjArray[j].clientHeight;}
                                    }
                                    for (var j=0; j<listObjArray.length; j++) {
                                        listObjArray[j].style.height = (listHeight - 10) + 'px';
                                    }
                                    maskObj.style.width = layerObj.offsetWidth + 'px';
                                    maskObj.style.height = layerObj.offsetHeight + 'px';
                                }
                            }
                        };
                        if ('onmouseleave' in navLi[i]) {
                            navLi[i].onmouseleave = function(event){
                                this.className = '';
                            };
                        } else {
                            navLi[i].onmouseout = function(event){
                                this.className = '';
                            };
                        }
                    }
                    
                }

                // 创建引入样式文件
                var gameheadCssHref = 'abc.css';
                var pageHead = document.getElementsByTagName('head')[0],
                gameheadCss = document.createElement('link');
                gameheadCss.setAttribute('rel', 'stylesheet');
                gameheadCss.setAttribute('type', 'text/css');
                gameheadCss.setAttribute('href', gameheadCssHref );

                  gameheadCss.onload = function(){
                    createHeadFn();
                  };
                  gameheadCss.onerror = function(){
                    if (window.console) {console.log(gameheadCssHref + '加载失败');}
                  };
                  var userAgent = navigator.userAgent.toLowerCase();
                  if (userAgent.indexOf('windows') > -1 && userAgent.indexOf('chrome') < 0 && userAgent.indexOf('safari') > -1) {
                    function poll(){
                      if (gameheadCss['sheet']) {
                        createHeadFn();
                      } else {
                        setTimeout(poll, 1);
                      }
                    }
                    setTimeout(poll, 0);
                  }

                pageHead.appendChild(gameheadCss);

                })('xy-gamehead', '3.0.2');

            }else{


                (function (scriptId, styleVersion) {

                var hotgameData = {
                'title': '热门游戏',
                'list': [
                {'text': '星座召唤', 'status':'', 'href': 'http://xzzh.xiaoyou-game.com','img': 'http://att1.niucdn.com/woniu.com/2015/0513/df26a116d64062121f3a707c9d63ac44c18b6c7b.jpeg'}
                ,{'text': '风暴神域', 'status':'', 'href': 'http://fbsy.xiaoyou-game.com/web/list/test.shtml','img': 'http://att1.niucdn.com/woniu.com/2015/0513/afe0639a92437a9e23d81d1aa7a85fa37e2db1bf.jpeg'}
                ]
                };


                gameHtml = '<div class="xy-gamehead-hotgame"><div class="xy-gamehead-hotgametitle">'+hotgameData['title']+'</div><div class="xy-gamehead-clearfix">';
                for (var i=0; i<hotgameData['list'].length; i++) {
                    gameHtml += '<a title="'+hotgameData['list'][i]['text']+'" class="xy-gamehead-hotgameli" href="'+hotgameData['list'][i]['href']+'" target="_self"><img alt="'+hotgameData['list'][i]['text']+'" src="'+hotgameData['list'][i]['img']+'">'+hotgameData['list'][i]['text']+'</a>';
                }
                gameHtml += '</div></div>';
                                                                                                                                                             
                loginHtml = '<li ><a class="xy-gamehead-navbtn" href="">登录</a></li><li><a class="xy-gamehead-navbtn" href="">注册</a></li>';

                var gameheadHtml = [
                '<div class="xy-gamehead">',
                    '<div class="xy-gamehead-contain">',
                        '<div class="xy-gamehead-nav">',
                            '<ul>',
                                loginHtml,      
                                    '<div class="xy-gamehead-navlayermask"></div>',
                                    '</li>',
                                '<li>',
                                    '<a title="逍游天下游戏" class="xy-gamehead-navbtn" href="" target="_self"><i></i>逍游天下游戏<em></em></a>',
                                    '<div class="xy-gamehead-navlayer xy-gamehead-gamelayer">',
                                        gameHtml,
                                        '</div>',
                                    '<div class="xy-gamehead-navlayermask"></div>',
                                    '</li>',
                                '<li>',
                                    '<a title="我的账户" class="xy-gamehead-navbtn" href="" target="_self">用户中心</a>',
                                    '<div class="xy-gamehead-navlayermask"></div>',
                                    '</li>',
                                '</ul>',
                            '</div>',
                        '</div>',
                    '</div>'];


                // 插入头部DOM结构
                function createHeadFn(){
                    var pageBody = document.body;
                    var headObj = document.getElementById('j-xy-gamehead');
                    if (!headObj) {
                        headObj = document.createElement("div");
                        headObj.id = 'j-xy-gamehead';
                        pageBody.insertBefore(headObj, pageBody.firstChild);
                    }
                    headObj.innerHTML = gameheadHtml.join('');   
                    // 二级菜单交互
                    var navLi = headObj.getElementsByTagName('li');
                    for (var i=0; i<navLi.length; i++) {
                        navLi[i].onmouseover = function(){
                            if (this.className != 'current') {
                                this.className = 'current';
                                var layerObj, maskObj;
                                var navLiDiv = this.getElementsByTagName('div');
                                var listObjArray = [];
                                    for (var j=0; j<navLiDiv.length; j++) {
                                    var classNames = navLiDiv[j].className.split(' ');
                                    for (var k=0; k<classNames.length; k++) {
                                        if (classNames[k] == 'xy-gamehead-navlayer') {layerObj = navLiDiv[j];}
                                        if (classNames[k] == 'xy-gamehead-navlayermask') {maskObj = navLiDiv[j];}
                                        if (classNames[k] == 'xy-gamehead-navlayer-list') {
                                            listObjArray.push(navLiDiv[j]);
                                        }
                                    }
                                }
                                if (layerObj && maskObj && maskObj.offsetWidth == 0) {
                                    var listHeight = 0;
                                    for (var j=0; j<listObjArray.length; j++) {
                                        if (listObjArray[j].clientHeight > listHeight) {listHeight = listObjArray[j].clientHeight;}
                                    }
                                    for (var j=0; j<listObjArray.length; j++) {
                                        listObjArray[j].style.height = (listHeight - 10) + 'px';
                                    }
                                    maskObj.style.width = layerObj.offsetWidth + 'px';
                                    maskObj.style.height = layerObj.offsetHeight + 'px';
                                }
                            }
                        };
                        if ('onmouseleave' in navLi[i]) {
                            navLi[i].onmouseleave = function(event){
                                this.className = '';
                            };
                        } else {
                            navLi[i].onmouseout = function(event){
                                this.className = '';
                            };
                        }
                    }
                    
                }

                // 创建引入样式文件
                var gameheadCssHref = 'abc.css';
                var pageHead = document.getElementsByTagName('head')[0],
                gameheadCss = document.createElement('link');
                gameheadCss.setAttribute('rel', 'stylesheet');
                gameheadCss.setAttribute('type', 'text/css');
                gameheadCss.setAttribute('href', gameheadCssHref );

                  gameheadCss.onload = function(){
                    createHeadFn();
                  };
                  gameheadCss.onerror = function(){
                    if (window.console) {console.log(gameheadCssHref + '加载失败');}
                  };
                  var userAgent = navigator.userAgent.toLowerCase();
                  if (userAgent.indexOf('windows') > -1 && userAgent.indexOf('chrome') < 0 && userAgent.indexOf('safari') > -1) {
                    function poll(){
                      if (gameheadCss['sheet']) {
                        createHeadFn();
                      } else {
                        setTimeout(poll, 1);
                      }
                    }
                    setTimeout(poll, 0);
                  }

                pageHead.appendChild(gameheadCss);

                })('xy-gamehead', '3.0.2');
            }
        },
        error:function(){
            alert('error');
        }
    })