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

随机推荐

PowerDesign不让name和code联动
当name和code一样时,修改name的话,code的值将跟着变动,很不方便.如果能让code不随着name编码就好了. PowerDesign中的选项菜单,在[Tool]-->[Genera ...
Entity Framework Architecture
http://www.entityframeworktutorial.net/EntityFramework-Architecture.aspx The following figure shows ...
三方贸易-drop ship
一．三方贸易的简单理解三方贸易:即当客户向我方下达采购订单要求订购货物,我方再向供应商下达相同采购订单,并要求供应商直接送货至客户处的交易形式,待交易完成后,由供应商向我方开具应收票据,我方向客户开 ...
Hook入门
Hook入门 2014-07-24 基本概念 Windows消息机制 Hook(钩子) 运行机制核心函数 C# hook示例基本概念[1] Windows消息机制[5] Windows操作系统是建 ...
hibernate学习笔记6--Criteria查询方式、完整小练习（开发步骤）
一.Criteria查询方式没有sql语了,因此更加面向对象一些.Criteria是一种比HQL更面向对象的查询方式:Criteria的创建方式: Criteria c = s.createCrite ...
document.body.innerHTML用jquery如何表示
$("body").html('XXXX'); //这个是赋值 $("body").html(); //这个是获取HTML的内容
SQL中返回一个字符串在另一个中存在的次数
ALTER FUNCTION [reg].[f_GetSameStringCntNoSort] ( @str1 VARCHAR(),--源字符串,取该串中的@strLen长度的字符是否在目的字符串 @ ...
用VS2005开发WinCE程序调试图文教程
一.WinCE 模拟器通过ActiveSync 6.1(即Windows Mobile设备中心)连接P 1.启动WinCE模拟器命令行: start .\DeviceEmulator.exe WI ...
MVC 中使用扩展方法
扩展方法(Extension Method)是给那些不是你拥有.因而不能直接修改的类添加方法的一种方便的办法. 一.使用扩展方法 1.定义一个购物车的类-ShoppingCart using Sys ...
BZOJ3306: 树
3306: 树 Time Limit: 10 Sec Memory Limit: 256 MBSubmit: 311 Solved: 86[Submit][Status] Description ...

js_sl 延迟菜单

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

随机推荐

热门专题