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中自适应显示图片 ...

随机推荐

static_cast 和 dynamic_cast 的区别
static_cast一般用来将枚举类型转换成整型,或者整型转换成浮点型.也可以用来将指向父类的指针转换成指向子类的指针.做这些转换前,你必须确定要转换的数据确实是目标类型的数据,因为static_c ...
leetcode：Invert Binary Tree
Invert a binary tree. 4 / \ 2 7 / \ / \ 1 3 6 9 to 4 / \ 7 2 / \ / \ 9 6 3 1即反转二叉树,代码如下: /** * Defin ...
jboss jndi配置部分参数详解
使用的是jboss7.1.1, jndi的配置在$JBOSS_HOME/standalone/configuration/standalone.xml中进行配置.配置jndi时有很多参数,解释下用到的 ...
plsql programming 17 过程, 函数与参数
代码模块化, 即将一大块代码拆成若干小块(过程), 然后就可以在其他模块调用这些模块了, 这样, 重用性更好, 也方便管理. 过程: 过程是一个可以像执行 PL/SQL 语句一样调用的程序, 一个过程 ...
LA 3602 DNA Consensus String
最近审题老是一错再错,Orz 题目中说求一个Hamming值总和最小的字符串,而不是从所给字符中找一个最小的这样的话,我们逐列处理,所求字符串当前位置的字符应该是该列中出现次数最多其次ASCII值最 ...
Jqgrid入门-Jqgrid分组的实现(八)
上一章主要说明了如果实现Jqgrid列数据拖动,这一章主要讨论在Jqgrid中如何实现分组功能. 类似于Sql语句的Group By,Jqgrid提供了属性实现数据分组,这样表现数据会 ...
R2的版本由来
给人一杯水,自己先有一桶水.上课.备课,那么备课中就常有一些稀奇古怪的问题. 学生问:SP2和R2是一样的吗? 老师答:不一样,一个是补丁程序,另一个是服务器操作系统. 学生不解:R2如果是操作系统, ...
hihoCoder #1182 欧拉路·三（变形）
题意: 写出一个环,环上有2^n个格子,每个格子中的数字是0或1,相连着的n个格子可以组成一个数的二进制,要求给出这2^n个数字的序列,使得组成的2^n个数字全是不同的.(即从0到2^n-1) 思路: ...
java监测方法运行时间/效率方法
前言: 这周在写一个小项目,虽然小但是是纯调外部接口的,调完了接口还不停的循环接口返回的数据(已转换JSONArray),然后再判断值,再做不同处理,关键是数据量还比较大,这刚做完还没开始上线,测试也 ...
jQuery和CSS 3定制HTML 5视频播放器
目前,随着越来越多的浏览器开始支持更多的HTML5新特性,开发者也逐渐关注HTML5的开发.在众多HTML5的新特性中,视频方面的新特性是很值得开发者和用户关注的.现在,只需要有支持HTML5的浏览 ...

js_sl 延迟菜单

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

随机推荐

热门专题