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

随机推荐

[androd] android的在线源码网站，各个版本都有（目前已到俺android 4.2，但不包含kernel部分的代码）
android的在线源码阅读网站,各个版本都有(目前最新版本已到android 4.2,但不包含kernel部分的代码) 这个网站最大的特点是:可以在网页上方的搜索框,搜索整个网站所存储的源码中的字符 ...
shader复杂与深入：Normal Map（法线贴图）1
转自:http://www.zwqxin.com/archives/shaderglsl/review-normal-map-bump-map.htmlNormal Map法线贴图,想必每个学习计算机 ...
HibernateTemplate 查询
Spring中常用的hql查询方法getHibernateTemplate()上一.find(String queryString); 示例:this.getHibernateTempl ...
poj 2479 (DP)
求一个区间内连续两段不相交区间最大和. // File Name: 2479.cpp // Author: Missa_Chen // Created Time: 2013年06月22日星期六 16 ...
51nod1434 区间LCM
将n!标准分解.m!/n!必定需要包含n!的分解式.对于每个质数枚举最小的答案,然后总的取最大. #include<cstdio> #include<cstring> #inc ...
How to begin with the webpage making
1.网页制作三剑客必须要会使用.(dreamweaver /fireworks/flash)2.学习些最基层的html语言的知识,3.在学习一些基本的html标签(要多加练习哦)4.先试着用表格进行 ...
旧书重温：0day2【3】详细解读PEB法查找kener32地址
题外话:上一篇文章中的 PEB法查找kerner32地址的方法对TEB.PEB .PE结构知识要求很高,确实在写汇编代码时候小编感觉自己能力,信手啪啪一顿乱撸,结果一运行,非法访问了,没办法翻阅 ...
（二）深入梯度下降(Gradient Descent)算法
一直以来都以为自己对一些算法已经理解了,直到最近才发现,梯度下降都理解的不好. 1 问题的引出对于上篇中讲到的线性回归,先化一个为一个特征θ1,θ0为偏置项,最后列出的误差函数如下图所示: 手动求解 ...
HDU 1423 Greatest Common Increasing Subsequence
最长公共上升子序列 LCIS 看这个博客 http://www.cnblogs.com/nuoyan2010/archive/2012/10/17/2728289.html #include&l ...
Android源码分析--CircleImageView 源码详解
源码地址为 https://github.com/hdodenhof/CircleImageView 实际上就是一个圆形的imageview 的自定义控件.代码写的很优雅,实现效果也很好, 特此分析. ...

js_sl 延迟菜单

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

随机推荐

热门专题