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>

时间： 2024-10-05 04:19:37

js_sl 延迟菜单的相关文章

js 延迟菜单

1.效果图 2. <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="miaov_style.css"> <script&g

看似简单的一个菜单,确需要不少的知识点 1. getByClass getElementsByClassName 已经有大部分现代浏览器支持了,只有ie6,ie7,ie8是不支持的.所以对ie6,7,8做特别的处理就行,而ie里边有个内置的属性一直被我们所忽略,document.all,这个比一般的document.getElementsByTagName('*')或许要快一点.2. setTimeout 的巧妙用法. 当鼠标离开某个区域时,延时隐藏另外一个区域,而到另外一个区域是清除这个定时器

Web前端开发推荐阅读书籍、学习课程下载

转自http://www.xuanfengge.com/fe-books.html 前言学校里没有前端的课程,那如何学习JavaScript,又如何使自己成为一个合格的前端工程师呢? 除了在项目中学习和跟着有经验的同事学习,读书也是必不可少的.书中有着相对完整的知识体系,每读一本好书都会带来一次全面的提高. 而如果深一脚浅一脚的学习,写出代码的质量会参差不齐.初学者的首要任务是成为靠谱的熟练开发者,能够稳定的输出有一定质量的代码. 前端技术发展速度特别快,总是涌现出很多新的东西,需要不断的学习

亚马逊左侧菜单延迟z三角 jquery插件jquery.menu-aim.js源码解读

关于亚马逊的左侧菜单延迟,之前一直不知道它的实现原理.梦神提到了z三角,我也不知道这是什么东西.13号那天很有空,等领导们签字完我就可以走了.下午的时候,找到了一篇博客:http://jayuh.com/amazon-site-navigation/ 它提到亚马逊左侧菜单的秘密在于它有一个三角形的缓冲延迟区域. 当鼠标在这个蓝色范围内移动时,会有延迟,所以右侧的二级菜单才不会马上变化. 顺着博客在github找到了这个插件:https://github.com/jayuh/jQuery-menu

延迟显示子菜单方法

hoverIntent插件-实现子菜单延时显示可以防止鼠标经过时的误点击操作 <title>延时显示子菜单的方法</title> <script type="text/javascript"> $(document).ready(function(){ $("#demo6").hoverIntent({ over: makeTall, out: makeShort, selector: 'li', timeout:500 });

延迟消失菜单

<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><style>*{ margin:0px; padding:0px; list-style-type:none; }a{ text-decoration:none; color:#FF3333; padding:0 1

java调用exe截图程序实现延迟截图

之前用Apple键盘,在windows系统上没有快速全屏截图工具,无法截取下拉菜单之类的点击其他地方就会消失的图片, 又不想写那么复杂,就使用java写了简单调用exe截图程序来实现延迟截图 1 import javax.swing.*; 2 import java.awt.event.ActionEvent; 3 import java.awt.event.ActionListener; 4 5 /** 6 * Created by ycl on 2017/8/17 2017-8-17 22:

自定义控件基础01_菜单轮__viewPager_下拉框_自定义开关

1,自定义控件分类: 1.1组合控件:由安卓中原生的控件组合起来,配合动画达成的效果 1.2自定义控件 1.3组合控件案例演示: 案例:优酷菜单demo 三层圆环,按下menu键会通过动画效果消失在界面,点击小房子和中层圆环,最外层圆环消失 ①布局实现: 三层相对布局相互叠加(因为图片背景是透明的,所以可以叠加显示) 由于三个布局是叠加显示的,所以这个菜单选项要使用一个占据焦点比较强的(不然有可能点击不到)ImageButton控件控件上background=”@android:color/t

自定义一个"花瓣"菜单－b

先来看一下效果 XLCircleMenu.gif 是不是觉得挺好玩的呀. 通过这篇文章你可以学到: 1.系统UITableView的部分设计思想 2.自定义控件常用设计思路 3.动画的具体使用 4.手势的具体使用 4.装逼一点,良好的代码风格 5...... 开始码随机颜色为了快速区分视图,这里用了随机颜色来区分,生成随机颜色的方式比较多.常见的获取方法为宏如下: #define RandomColor [UIColor colorWithRed:arc4random_uniform(255)