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中自适应显示图片 ...
随机推荐
- Linux屏幕录制gif的工具及教程
准备 要两个工具配合使用.它们可以用命令行安装,也可以用软件管理器安装. 1,byzanz 安装后有两个命令 byzanz-record 录制,既能录制 Gif 动画,又可录制 Ogv 视 ...
- Spring 注解@Transactional
Spring事务的传播行为 在service类前加上@Transactional,声明这个service所有方法需要事务管理.每一个业务方法开始时都会打开一个事务. Spring默认情况下会对运行期例 ...
- C#的运算符重载
运算符重载看起来与标准静态方法声明类似,但它们使用关键字operator和运算符本身,而不是一个方法名: public static 返回类型 operator +(类型1 变量1,类型2 变量2) ...
- C#将list转换为datatable
DataTable dt = new DataTable(); if (_list != null) { //通过反射获取list中的字段 System.Reflection.PropertyInfo ...
- python实现简单kNN
注释写得很清楚了,熟悉了一下python的一些基本语法和numpy中的一些操作. from numpy import * import operator def createDataSet(): # ...
- [Topcoder]AvoidRoads（dp，hash）
题目连接:https://community.topcoder.com/stat?c=problem_statement&pm=1889&rd=4709 题意:给一张n*m的地图,上面 ...
- 二维线性表 list实现
class Coordinate{ private int x; private int y; } List<Coordinate> list=new ArrayList<Coord ...
- HDU 2577 How to Type【DP】
题意:给出一个字符串,有大写有小写,问最少的按键次数.然后打字的这个人有一个习惯,打完所有的字之后,指示灯要关闭. dp[i][j]表示打到第i个字母,j有0,1两个值表示指示灯开或者关的状态 然后就 ...
- decorate装饰模式
package com.decorate; public class Iphone implements Phone{ @Override public void call() { System.ou ...
- How to: Modify a Project System So That Projects Load in Multiple Versions of Visual Studio
http://msdn.microsoft.com/en-us/library/hh266706(v=VS.110).aspx