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 文本转换为 JavaScript 对象二:JSON 实例 - 来自字符串的对象 一.把 JSON 文本转换为 JavaScript 对象JSON 最常见的用法之一,是 ...
- 至强CPU性能排行，从X3210起，由低至高排列。
X3210X3220E5410E5506X5355X3320E5507X5365E5-2603E3-1220LE5-2403E5607X3330L5506X3230L5420E5-2407W3520E ...
- 思科Cisco 2960系列交换机配置命令
配置密码: 2960>en :第一次密码为空 2960h#conf t :进入全局配置模式 2960(config)#hostname swa :设置交换机名 2960(config)#enab ...
- 如何在iPhone与iPad上开启firebug
原文: MARTIN KOOL games - web - dad - sarien.net - q42 - livejs - handcraft How to use Firebug on your ...
- PHP 回调、匿名函数和闭包
<?php class Product{ public $name; public $price; function __construct($name, $price){ $this-> ...
- 【转载】C++中的位拷贝和值拷贝
---恢复内容开始--- 原文:C++中的位拷贝和值拷贝 原文:http://blog.csdn.net/liam1122/article/details/1966617 为了便于说明我们以Strin ...
- git 临时记录
http://blog.csdn.net/wangbole/article/details/8552808 http://blog.csdn.net/gq414047080/article/detai ...
- 获取ip
需要引用System.Web http://stackoverflow.com/questions/4879837/smart-way-to-get-the-public-internet-ip-ad ...
- pycharm 注册
pycharm在线注册:设置激活服务器 Help->Register->License server 在License server address中填写:http://idea.lany ...
- 描述Linux运行级别0-6的各自含义
中文: 0: 关机模式 1:单用户模式<==破解root密码 2:无网络支持的多用户模式 3:有网络支持的多用户模式(文本模式,工作中最长使用的模式) 4:保留,未使用 5:有网络支持又x-wi ...