js_sl 延迟菜单
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
* { padding: 0; margin: 0; }
li { list-style: none; } #nav { width: 500px; height: 36px; padding: 0 10px; background: url(img/nav_bg.gif) repeat-x; margin: 50px auto 0; position: relative; }
#nav .adorn1 { width: 6px; height: 36px; background: url(img/nav_bg.gif) no-repeat 0 -36px; position: absolute; top: 0; left: 0; }
#nav .adorn2 { width: 6px; height: 36px; background: url(img/nav_bg.gif) no-repeat 0 -72px; position: absolute; top: 0; right: 0; }
#nav li { float: left; height: 36px; padding: 0 3px 0 7px; position: relative; cursor: pointer; } #nav .line { background: url(img/active_bg.gif) no-repeat 0 -90px; } #nav .active { float: left; height: 36px; line-height: 36px; font-size: 14px; text-decoration: none; color: #fff; background: url(img/active_bg.gif) no-repeat right -40px; }
#nav .active span { float: left; height: 36px; line-height: 36px; font-size: 14px; padding: 0 20px; text-decoration: none; color: #fff; background: url(img/active_bg.gif) no-repeat 0 5px; }
#nav .normal { float: left; height: 36px; line-height: 36px; font-size: 14px; text-decoration: none; color: #fff; }
#nav .normal span { float: left; height: 36px; padding: 0 20px; }
#nav .normal:hover { background: url(img/active_bg.gif) no-repeat right -40px; }
#nav .normal:hover span { background: url(img/active_bg.gif) no-repeat 0 5px; } #nav .float_layer { height: 27px; color: #235e99; padding: 0 10px; background: url(img/nav_bg.gif) repeat-x 0 -162px; position: absolute; top: 46px; display: none; }
#nav .arrows { width: 7px; height: 5px; overflow: hidden; background: url(img/active_bg.gif) no-repeat 0 -190px; position: absolute; top: -4px; }
#nav .decorate1 { width: 6px; height: 27px; background: url(img/nav_bg.gif) no-repeat 0 -108px; position: absolute; top: 0; left: -6px; }
#nav .decorate2 { width: 6px; height: 27px; background: url(img/nav_bg.gif) no-repeat 0 -135px; position: absolute; top: 0; right: -6px; } #nav .float_layer a { float: left; height: 27px; line-height: 22px; font-size: 12px; color: #235e99; text-decoration: none; background: url(imgs/active_bg.gif) no-repeat right -207px; padding: 0 8px; }
#nav .float_layer a span { float: left; height: 18px; padding-top: 3px; overflow: hidden; border-bottom: 2px solid #cedce8; }
#nav .float_layer a:hover span { border-bottom: 2px solid #235e99; } #nav p { position: absolute; top: 10px; right: 20px; }
#nav p a { color: #fff; font-size: 14px; text-decoration: none; }
#nav p a:hover { text-decoration: underline; } .pos1 { left: 0; }
.pos1 .arrows { left: 36px; }
.w1 { width: 245px; } .pos2 { left: 0; }
.pos2 .arrows { left: 50px; }
.w2 { width: 260px; } .pos3 { left: -100px; }
.pos3 .arrows { left: 136px; }
.w3 { width: 230px; } .pos4 { left: -100px; }
.pos4 .arrows { left: 136px; }
.w4 { width: 310px; }
</style>
<script>
window.onload = function ()
{
var oa = getByClass(document,'normal');
var ospan = getByClass(document,'float_layer');
var timer = null; for(var i = 0; i < oa.length; i++)
{
oa[i].index = i;
oa[i].onmouseover = function ()
{
for(var i = 0; i < ospan.length; i++)
{
ospan[i].style.display = 'none';
} ospan[this.index].style.display = 'block';
clearInterval(timer);
} oa[i].onmouseout = function ()
{
var This = this;
timer = setInterval(function ()
{
ospan[This.index].style.display = 'none';
},1000);
} ospan[i].onmouseover = function ()
{
clearInterval(timer);
} ospan[i].onmouseout = function ()
{
var This = this;
timer = setInterval(function(){
This.style.display = 'none';
},1000);
}
} function getByClass(oparent,sclass)
{
var aele = oparent.getElementsByTagName('*');
var result = [];
var re = RegExp('\\b'+ sclass +'\\b'); for( var i = 0; i < aele.length; i++ )
{
if(re.test(aele[i].className))
{
result.push(aele[i])
}
} return result;
} }
</script>
</head> <body> <div id="nav">
<div class="adorn1"></div>
<div class="adorn2"></div>
<ul>
<li>
<a class="normal" href="http://www.miaov.com"><span>首页</span></a>
<span class="float_layer w1 pos1">
<span class="arrows"></span>
<span class="decorate1"></span>
<span class="decorate2"></span>
<a href="http://www.miaov.com"><span>最近更新</span></a>
<a href="http://www.miaov.com"><span>活动</span></a>
<a href="http://www.miaov.com"><span>报名试听</span></a>
<a href="http://www.miaov.com"><span>学员反馈</span></a>
</span>
</li>
<li class="line">
<a class="normal" href="http://www.miaov.com"><span>关于我们</span></a>
<span class="float_layer w2 pos2">
<span class="arrows"></span>
<span class="decorate1"></span>
<span class="decorate2"></span>
<a href="http://www.miaov.com"><span>妙味讲师</span></a>
<a href="http://www.miaov.com"><span>培训方式</span></a>
<a href="http://www.miaov.com"><span>培训理念</span></a>
<a href="http://www.miaov.com"><span>联系我们</span></a>
</span>
</li>
<li class="line">
<a class="normal" href="http://www.miaov.com"><span>作品</span></a>
<span class="float_layer w3 pos3">
<span class="arrows"></span>
<span class="decorate1"></span>
<span class="decorate2"></span>
<a href="http://www.miaov.com"><span>般固</span></a>
<a href="http://www.miaov.com"><span>MATRIX</span></a>
<a href="http://www.miaov.com"><span>留学e网</span></a>
<a href="http://www.miaov.com"><span>ECMall</span></a>
</span>
</li>
<li class="line">
<a class="normal" href="http://www.miaov.com"><span>博客</span></a>
<span class="float_layer w4 pos4">
<span class="arrows"></span>
<span class="decorate1"></span>
<span class="decorate2"></span>
<a href="http://www.miaov.com"><span>JS教程</span></a>
<a href="http://www.miaov.com"><span>弹出层效果</span></a>
<a href="http://www.miaov.com"><span>3D球面标签云</span></a>
<a href="http://www.miaov.com"><span>Window计算器</span></a>
</span>
</li>
</ul>
<p><a href="http://www.miaov.com">>>更多</a></p>
</div> </body>
</html>
js_sl 延迟菜单的更多相关文章
- Js实现京东无延迟菜单效果(demo)
一个端午节,外面人山人海,又那么热,我认为宅在家里看看慕课网,充实自己来的实际... 这是一个js实现京东无延迟菜单效果,感觉很好,分享给大家... 1.开发基本的菜单结构 2.开发普通的二级菜单效果 ...
- Js实现京东无延迟菜单效果(demo) 慕课网
先来理清思路:1.开发基本的菜单结构 2.开发普通的二级菜单效果 3.假如延迟解决移动问题 切换子菜单时候,用setTimeout设置延迟 debounce去抖技 在事件被频繁触发是,只执行一次处理 ...
- js二级下拉菜单
看似简单的一个菜单,确需要不少的知识点 1. getByClass getElementsByClassName 已经有大部分现代浏览器支持了,只有ie6,ie7,ie8是不支持的.所以对ie6,7, ...
- hibernate对连接池的支持和HQL查询
hibernate对连接池的支持 连接池, 作用: 管理连接:提升连接的利用效率! 常用的连接池: C3P0连接池 Hibernate 自带的也有一个连接池,且对C3P0连接池也有支持! 只维护一个连 ...
- Web前端开发推荐阅读书籍、学习课程下载
转自http://www.xuanfengge.com/fe-books.html 前言 学校里没有前端的课程,那如何学习JavaScript,又如何使自己成为一个合格的前端工程师呢? 除了在项目中学 ...
- 简单Tab切换
延迟Tab切换,使用css中的flex布局,原生js实现.(京东首页菜单也有此延迟功能哦!) 每天进步一丢丢~~ 1.延迟Tab切换 <!DOCTYPE html> <html la ...
- 修改AdminLTE左侧菜单展开延迟
AdminLTE左侧菜单展开会有半秒钟的延迟. 看起来会慢半拍. 可修改 admin/dist/js/app.min.js中的 animationSpeed值(默认为500) 如下:
- 亚马逊左侧菜单延迟z三角 jquery插件jquery.menu-aim.js源码解读
关于亚马逊的左侧菜单延迟,之前一直不知道它的实现原理.梦神提到了z三角,我也不知道这是什么东西.13号那天很有空,等领导们签字完我就可以走了.下午的时候,找到了一篇博客:http://jayuh.co ...
- Qt自适应大小显示图片,添加菜单
由于后面的图像处理需要UI,OpenCV自带也不怎么会,MFC实在懒得学的.听同学说Qt不错,就用Qt做UI了. 本文主要介绍三个内容:在Qt Creator中使用OpenCV2.Qt中自适应显示图片 ...
随机推荐
- Java NIO读书笔记2
一.选择器(Selector) Selector(选择器)是Java NIO中能够检测一到多个NIO通道,并能够知晓通道是否为诸如读写事件做好准备的组件.这样,一个单独的线程可以管理多个channel ...
- hibernate工具类HibernateUtil详解
1.为什么要用hibernateUtil这个类,先看这段代码: //加载配置文件信息默认为hiberna.cfg.xml,如果不是的话那么就在config()方法里面去解析他 Con ...
- json和jsonp的使用格式
最近一直在看关于json和jsonp的区别和各自的用法.优缺点! 下面是我看到过解释最清楚的一片文章 说到AJAX就会不可避免的面临两个问题,第一个是AJAX以何种格式来交换数据?第二个是跨域的需求 ...
- 20160126.CCPP体系详解(0005天)
程序片段(01):eatmem.c 内容概要:语句和逻辑结构 #include <stdio.h> #include <stdlib.h> #include <Windo ...
- Linux VPS 基本命令
我们Linux VPS用命令才能管理他,我们来罗列一些基本和简单的Linux的命令 1.lsls / 查看根目录ls -a / 查看根目录下所要文件,包括隐藏文件ls -l / 详细列出目录下文件的权 ...
- 微信 ua
Mozilla/5.0 (Linux; U; Android 2.3.6; zh-cn; GT-S5660 Build/GINGERBREAD) AppleWebKit/533.1 (KHTML, l ...
- JVM——类的加载过程
附一张图方便理解,一个类的执行过程 类的加载过程,简明的来说 类装饰器就是寻找类的字节码文件并构造出类在JVM内部表示的对象组件.在Java中,类装载器把一个类装入JVM中,要经过以下步骤: 装载:查 ...
- 【转】Mac 10.10 yosemite 安装samba替代系统samba组件 -- samba不错不错
原文网址:http://gcell.blog.163.com/blog/static/52666594201501084530277/ 1.首先,在系统偏好设置的共享设置中,关掉局域网文件共享(去掉打 ...
- MySQL与Oracle 差异比较之二基本语法
基本语法 编号 类别 ORACLE MYSQL 注释 1 变量的声明方式不同 li_index NUMBER := 0 DECLARE li_index INTEGER DEFAULT 0 1. my ...
- 【ASP.NET Web API教程】1.1 第一个ASP.NET Web API
Your First ASP.NET Web API (C#)第一个ASP.NET Web API(C#) By Mike Wasson|January 21, 2012作者:Mike Wasson ...