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网站图集相册特效是一款可以直接使用鼠标进行前后导航,也可以通过缩略图来切换图片. 在线演示本地下载
随机推荐
- iOS-图文表并茂，手把手教你GCD
前言 对初学者来说,GCD似乎是一道迈不过去的坎,很多人在同步.异步.串行.并行和死锁这几个名词的漩涡中渐渐放弃治疗.本文将使用图文表并茂的方式给大家形象地解释其中的原理和规律. 线程.任务和队列的概 ...
- easyui datagrid tooltip
$('#dg').datagrid('getPanel').find('.easyui-tooltip').each(function(){ var index = parseInt($(this). ...
- CentOS下LAMP一键yum安装脚本
本脚本适用环境: 系统支持:CentOS/Redhat/Fedora 内存要求:≥64M 硬盘要求:2GB以上的剩余空间 服务器必须配置好软件源和可连接外网 必须具有系统 root 权限 建议使用干净 ...
- python走起之第五话
模块 1.自定义模块 自定义模块就是在当前目录下创建__init__.py这个空文件,这样外面的程序才能识别此目录为模块包并导入 上图中libs目录下有__init__.py文件,index.py程序 ...
- c语言文件复制
#include<stdio.h> #include<stdlib.h> void main(void) { // locate ], outfile[]; gets(infi ...
- python 中date datetime time 与str的互转
以下全部引入 form datetime import datetime, timedelta import time 一.time 转str 二.datetime 转 str str_date = ...
- Ubuntu14.04安装redis和简单配置
1.前言 Redis是常用基于内存的Key-Value数据库,比Memcache更先进,支持多种数据结构,高效,快速.用Redis可以很轻松解决高并发的数据访问问题:做为时时监控信号处理也非常不错. ...
- [转]我为什么要学习python
我为什么要学习python 引言:学习python近两年,谈谈我对于python的一点小理解,也从一些方面谈谈自己微薄的想法,也就是我为什么学习python 这里我不讨论python的一些有用的库 ...
- 笨办法学 Python （Learn Python The Hard Way）
最近在看:笨办法学 Python (Learn Python The Hard Way) Contents: 译者前言 前言:笨办法更简单 习题 0: 准备工作 习题 1: 第一个程序 习题 2: 注 ...
- html知识2
1.超链接 语法:<a href "" target="打开方式" name="页面锚点名称">链接文字或者图片</a&g ...