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');
}
})