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');
}
})
js 网站顶部通用导航的更多相关文章
- js 网站顶部导航栏
(function(){ var map = { 'index' : 0, 'gift_code' : 1, 'base_info' : 1, 'band_phone': 1, 'unlink_pho ...
- 为SharePoint网站创建自定义导航菜单
转:http://kaneboy.blog.51cto.com/1308893/397779 相信不少人都希望把SharePoint网站内置的那个顶部导航菜单,换成自己希望的样式.由于SharePoi ...
- jQuery网站顶部定时折叠广告
效果体验:http://hovertree.com/texiao/jquery/4.htm HTML文件代码: <!DOCTYPE html> <html xmlns="h ...
- SharePoint 2010顶部链接导航栏的详细操作
转:http://www.360sps.com/Item/UseTopLink.aspx 在SharePoint 2010环境的页面中,导航链接总体上可以分为两类,一类是显示在左侧的快速启动栏,另一类 ...
- Jq_网站顶部定时折叠广告
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><titl ...
- 一款基于jquery固定于顶部的导航
今天给大家分享一款基于jquery固定于顶部的导航,这款导航当浏览器滚动条位于顶部时,导航高度较高,当浏览器滚动向下滚动时,导航高度自动减低,并位于顶部.效果图如下: 在线预览 源码下载 实现的代 ...
- 一款基于jquery滑动后固定于顶部的导航
之前已为大家介绍了好多css3实现的导航菜单.今天分享一款基于jquery滑动后固定于顶部的导航.这款导航的特点是初始位于顶部下面一百个像素,当鼠标滚动时到下方,导航一直处于顶部.效果图如下: 在线预 ...
- swiper 、css3制作移动端网站，折叠导航
swiper .css3制作移动端网站,折叠导航 前几天公司要更新改版移动端的官网,由于网站本身没有多少内容,所以设计师就做成了整屏滑动的样子,起初我并没有看设计稿就一口答应了,拿到手后发现了几个问题 ...
- JS网站图集相册特效
JS网站图集相册特效是一款可以直接使用鼠标进行前后导航,也可以通过缩略图来切换图片. 在线演示本地下载
随机推荐
- JSON上
关于JSON部分: 目录: 一:定义二:实例三:JSON的语法 一:什么是JSON? 1.JSON:JavaScript 对象表示法(JavaScript Object Notation). 2.JS ...
- RabbitMQ入门教程（转）
http://blog.csdn.net/column/details/rabbitmq-for-java.html http://blog.csdn.net/anzhsoft/article/det ...
- 【iOS】The differences between Class Extension and Header File 类扩展与头文件的区别
. As the name suggests, they extend the class. A class continuation is another name. The class exten ...
- Python3基础 reverse 将列表倒序排列
镇场诗:---大梦谁觉,水月中建博客.百千磨难,才知世事无常.---今持佛语,技术无量愿学.愿尽所学,铸一良心博客.------------------------------------------ ...
- VirtualProvider （VirtualCube）虚拟立方体
声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...
- tcp/ip详解-ip头部选项字段
IP头部的选项字段 作用:用于网络调试和测试 IP首部的可变部分就是一个可选字段.选项字段用来支持排错.测量以及安全等措施,内容很丰富.此字段的长度可变,从1个字节到40个字节不等,取决于所选择的项目 ...
- POM.xml 标签详解
pom作为项目对象模型.通过xml表示maven项目,使用pom.xml来实现.主要描述了项目:包括配置文件:开发者需要遵循的规则,缺陷管理系统,组织和licenses,项目的url,项目的依赖性,以 ...
- 转：C++中的单例模式
C++中的单例模式 单例模式也称为单件模式.单子模式,可能是使用最广泛的设计模式.其意图是保证一个类仅有一个实例,并提供一个访问它的全局访问点,该实例被所有程序模块共享.有很多地方需要这样的功能模块, ...
- Android显示基础--单位与尺寸
px:是像素的意思,屏幕可以显示的最小元素单位,单独一个像素点非常小,肉眼都无法看到. pt:是磅数的意思,1磅等于七十二分之一英寸,pt一般用作字体的单位. dp:密度无关像素的意思,也被称为dip ...
- iOS沙盒路径的查看和使用
1.模拟器沙盒目录 文件都在个人用户名文件夹下的一个隐藏文件夹里,中文叫资源库,他的目录其实是Library. 因为应用是在沙箱(sandbox)中的,在文件读写权限上受到限制,只能在几个目录下读写文 ...