<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,[email protected],用.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>
导航菜单交叉移动
时间: 2024-12-14 02:34:31
导航菜单交叉移动的相关文章
纯css实现的三级水平导航菜单
vscode练习使用开发纯css的三级水平导航菜单.先上图: 1.html5布局 1 <html> 2 3 <head> 4 <meta charset="UTF-8"> 5 <title>水平导航菜单</title> 6 <link rel="stylesheet" href="reset.css"> 7 <link rel="stylesheet"
Angular+Bootstrap3导航菜单
Angular+Bootstrap3导航菜单 AngularJS体验式编程系列文章,将介绍如何用angularjs构建一个强大的web前端系统.angularjs是由Google团队开发的一款非常优秀web前端框架.在当前如此多的web框架下,angularjs能脱颖而出,从架构设计上就高人一等,双向数据绑定,依赖注入,指令,MVC,模板.Angular.js创新地把后台技术融入前端开发,扫去jQuery一度的光芒.用angularjs就像写后台代码,更规范,更结构化,更可控. 关于作者 张丹(
Web前端开发实战4:导航菜单(一)
在前面的博文中我们提到横向一级菜单,这里我们来看看导航菜单.导航菜单种类很多,但是制作原理都是大同 小异的,这里看的比二级下拉式菜单还简单.来看一些网站上的导航菜单: 垂直导航菜单: 水平导航菜单: 一垂直菜单 制作原理:(1)用无序列表构建菜单:(2)<a>标签的设置:ul li a{display:block;}.定义的关键是将<a>标签设置为 块元素. 代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans
导航菜单滑动动画
用jquery实现百度新闻导航菜单滑动动画 前言 前两天,群里有人问百度新闻导航是如何实现的,当时由于忙于工作,没有来得及细看,恰好今天有空闲时间,索性就实现一下这个效果吧: 思路与步骤 1.利用UL创建简单横向导航: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&g
MVC+Bootstrap 企业通用框架搭建--左侧导航菜单的实现--导航菜单的增删改查(3)
补充上面的点击菜单表信息: using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Threading.Tasks; namespace SqlServer.Entity{ public class Menu_Operation { private int _operation_id; public int Operation_id { get { return
MVC+Bootstrap 企业通用框架搭建--左侧导航菜单的实现(2)
为了实现点击之后导航菜单变成这个样式我使用了mvc的切面编程实现:就是每点击一个菜单进入SupportFilterAttribute 这个类的OnActionExecuting 方法中得到方法的控制器的url:去数据库查询点击了那个导航菜单 保存到导航菜单点击表信息里面:根据这个改变了导航菜单点击的样式: SupportFilterAttribute代码: using System;using System.Collections.Generic;using System.Linq;using
MVC+Bootstrap 企业通用框架搭建--左侧导航菜单的实现(1)
导航菜单的实现:Navbar_Menu public class Navbar_Menu { /// <summary> /// 导航菜单编号 /// </summary> private int _nav_menuid; public int Nav_menuid { get { return _nav_menuid; } set { _nav_menuid = value; } } /// <summary> /// 菜单名称 /// </summary>
html-制作导航菜单
导航菜单nav: 1.使用列表标签<ul> 2.使用浮动布局float 3.使用超链接标签<a>:要使用<a>标签的margin外边距,需要让<a>标签成为一个块级元素,添加display:block属性 标签代码 <div class="header"> <div class="logo"> logo
css3和jquery实现的可折叠导航菜单(适合手机网页)
之前为大家介绍了好几款css3导航,今天为大家在介绍的是一款适合放在手机网页的导航菜单.点击列表图标以下拉式的形式显示菜单,单击关闭,动画关闭.效果相当不错.效果图如下: 在线预览 源码下载 这个实例由css3和依赖于jquery插件.下面是实现代码 html代码: <nav class="nav" role="navigation" style="height: 195px;"> <ul class="nav-i