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 ...

js_sl 延迟菜单

js_sl 延迟菜单的更多相关文章

随机推荐

热门专题