码迷,mamicode.com
首页 > 移动开发 > 详细

导航菜单交叉移动

时间:2014-07-05 22:00:29      阅读:397      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   java   color   width   

<style>
#menuShow{
border: 1px solid #6cccc6;
background-color: #11cccc;
padding: 13px;
font-size: 13px;
font-family: Verdana, Arial;
position: absolute;
width: auto;
height: auto;
}
#menuSelect{
border: 1px solid #fffff6;
background-color: #aafff1;
padding: 13px;
font-size: 13px;
font-family: Verdana, Arial;
position: absolute;
width: auto;
height: auto;
}
</style>
<a href="<#ZC_BLOG_HOST#>">站长特效网</a>,站长必备的高质量网页特效和广告代码。zzjs.net,站长js特效。<hr>
<!--欢迎来到站长特效网,我们网站收集大量高质量js特效,提供许多广告代码下载,网址:www.zzjs.net,zzjs@msn.com,用.net打造靓站-->
<div id="menuSelect">
<a href="#" onClick="moveOnMenu();moveOffSelector()">点我交换</a>
<a href="http://www.zzjs.net">站长特效网</a>
<a href="http://zzjs.net/?cat=1">zzjs</a>
<a href="http://zzjs.net/?cat=2">网页特效</a>
<a href="http://zzjs.net/?cat=11">广告代码</a>
<a href="http://www.alixixi.com">阿里西西</a>
<a href="http://www.cctv.com">央视国际</a>
<a href="http://www.163.com">网易</a>
<a href="http://www.sohu.com">搜狐</a>
<a href="http://www.blueidea.com">蓝色理想</a>
</div>
<div id="menuShow">
<a href="#" onClick="moveOffMenu();moveOnSelector()">交换导航</a>
<a href="http://www.zzjs.net">站长特效网</a>
<a href="http://zzjs.net/?cat=1">zzjs</a>
<a href="http://zzjs.net/?cat=2">网页特效</a>
<a href="http://zzjs.net/?cat=11">广告代码</a>
<a href="http://www.alixixi.com">阿里西西</a>
<a href="http://www.cctv.com">央视国际</a>
<a href="http://www.163.com">网易</a>
<a href="http://www.sohu.com">搜狐</a>
<a href="http://www.blueidea.com">蓝色理想</a>
</div>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
Show ="yes";
var OffX = -170;
var PosX = 400;
var PosY = 100;
var speed = 1;
var increment = 1;
var incrementNS4 = 5; // for slower NS4 browsers
//欢迎来到站长特效网,我们的网址是www.zzjs.net,很好记,zz站长,js就是js特效,本站收集大量高质量js代码,还有许多广告代码下载。
var is_NS = navigator.appName=="Netscape";
var is_Ver = parseInt(navigator.appVersion);
var is_NS4 = is_NS&&is_Ver>=4&&is_Ver<5;
var is_NS5up = is_NS&&is_Ver>=5;
//欢迎来到站长特效网,我们的网址是www.zzjs.net,很好记,zz站长,js就是js特效,本站收集大量高质量js代码,还有许多广告代码下载。
var MenuX = OffX;
var SelX = PosX;
var sPosX = PosX;
var sOffX = OffX;
//欢迎来到站长特效网,我们的网址是www.zzjs.net,很好记,zz站长,js就是js特效,本站收集大量高质量js代码,还有许多广告代码下载。
if (Show == "yes") {
sPosX = OffX;
sOffX = PosX;
MenuX = sOffX;
SelX = sPosX;
}
//欢迎来到站长特效网,我们的网址是www.zzjs.net,很好记,zz站长,js就是js特效,本站收集大量高质量js代码,还有许多广告代码下载。
if (is_NS4) {
increment = incrementNS4;
Lq = "document.layers.";
Sq = "";
eval(Lq+‘menuSelect‘+Sq+‘.left=sPosX‘);
eval(Lq+‘menuShow‘+Sq+‘.left=sOffX‘);
eval(Lq+‘menuSelect‘+Sq+‘.top=PosY‘);
eval(Lq+‘menuShow‘+Sq+‘.top=PosY‘);
} else {
Lq = "document.all.";
Sq = ".style";
document.getElementById(‘menuSelect‘).style.left = sPosX+"px";
document.getElementById(‘menuShow‘).style.left = sOffX+"px";
document.getElementById(‘menuSelect‘).style.top = PosY+"px";
document.getElementById(‘menuShow‘).style.top = PosY+"px";
}
//欢迎来到站长特效网,我们的网址是www.zzjs.net,很好记,zz站长,js就是js特效,本站收集大量高质量js代码,还有许多广告代码下载。
function moveOnMenu() {
if (MenuX < PosX) {
MenuX = MenuX + increment;
if (is_NS5up) {
document.getElementById(‘menuShow‘).style.left = MenuX+"px";
} else {
eval(Lq+‘menuShow‘+Sq+‘.left=MenuX‘);
}
setTimeout(‘moveOnMenu()‘,speed);
}
}
//欢迎来到站长特效网,我们的网址是www.zzjs.net,很好记,zz站长,js就是js特效,本站收集大量高质量js代码,还有许多广告代码下载。
function moveOffMenu() {
if (MenuX > OffX) {
MenuX = MenuX - increment;
if (is_NS5up) {
document.getElementById(‘menuShow‘).style.left = MenuX+"px";
} else {
eval(Lq+‘menuShow‘+Sq+‘.left=MenuX‘);
}
setTimeout(‘moveOffMenu()‘,speed);
}
}
function moveOffSelector() {
if (SelX > OffX) {
SelX = SelX - increment;
if (is_NS5up) {
document.getElementById(‘menuSelect‘).style.left = SelX+"px";
} else {
eval(Lq+‘menuSelect‘+Sq+‘.left=SelX‘);
}
setTimeout(‘moveOffSelector()‘,speed);
}
}
function moveOnSelector() {
if (SelX < PosX) {
SelX = SelX + increment;
if (is_NS5up) {
document.getElementById(‘menuSelect‘).style.left = SelX+"px";
} else {
eval(Lq+‘menuSelect‘+Sq+‘.left=SelX‘);
}
setTimeout(‘moveOnSelector()‘,speed);
}
}
// End -->
</script>

导航菜单交叉移动,布布扣,bubuko.com

导航菜单交叉移动

标签:style   blog   http   java   color   width   

原文地址:http://www.cnblogs.com/skyay/p/3826183.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!