try.html

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title></title>

    <link rel="stylesheet" type="text/css" href="try.css">

    <script type="text/javascript" src="try.js"></script>

</head>

<body>

<div id="notice" class="notice">

    <div class="notice-tit" id="notice-tit">

        <ul>

            <li><a href="#">公告</a></li>

            <li><a href="#">规则</a></li>

            <li><a href="#">论坛</a></li>

            <li><a href="#">安全</a></li>

            <li class="select"><a href="#">公益</a></li>

        </ul>

    </div>

    <div id="notice-con" class="notice-con">

        <div class="mod" style="display: none;">

            <ul>

                <li><a href="#">张勇：玩快乐足球</a></li>

                <li><a href="#">张勇：玩快乐足球</a></li>

                <li><a href="#">张勇：玩快乐足球</a></li>

                <li><a href="#">张勇：玩快乐足球</a></li>

            </ul>

        </div>

        <div class="mod" style="display: none;">

            <ul>

                <li><span>[<a href="#">通知</a>]</span><a href="#">张勇：要玩快乐足球</a></li>

                <li><span>[<a href="#">通知</a>]</span><a href="#">张勇：要玩快乐足球</a></li>

                <li><span>[<a href="#">通知</a>]</span><a href="#">张勇：要玩快乐足球</a></li>

                <li><span>[<a href="#">通知</a>]</span><a href="#">张勇：要玩快乐足球</a></li>

            </ul>

        </div>

        <div class="mod" style="display: none;">

            <ul>

                <li><span>[<a href="#">通知</a>]</span><a href="#">张勇：玩快乐足球</a></li>

                <li><span>[<a href="#">通知</a>]</span><a href="#">张勇：玩快乐足球</a></li>

                <li><span>[<a href="#">通知</a>]</span><a href="#">张勇：玩快乐足球</a></li>

                <li><span>[<a href="#">通知</a>]</span><a href="#">张勇：玩快乐足球</a></li>

            </ul>

        </div>

        <div class="mod" style="display: none;">

            <ul>

                <li><a href="#">张勇：要玩快乐</a></li>

                <li><a href="#">张勇：要玩快乐足球</a></li>

                <li><a href="#">张勇：要玩快乐足球</a></li>

                <li><a href="#">张勇：要玩快乐足球</a></li>

            </ul>

        </div>

        <div class="mod" style="display: block;">

            <ul>

                <li><a href="#">张勇：要玩快乐</a></li>

                <li><a href="#">张勇：要玩快乐足球</a></li>

                <li><a href="#">张勇：要玩快乐足球</a></li>

                <li><a href="#">张勇：要玩快乐</a></li>

            </ul>

        </div>

    </div>

</div>

</body>

</html>

　try.css　

*{

    margin: 0;

    padding:0;

    list-style: none;

    font-size: 12px;

}

.notice{

    width: 298px;

    height: 98px;

    margin: 10px;

    border: 1px solid #eee;

    overflow: hidden;

}

.notice-tit{

    height: 27px;

    position: relative;

    background-color: #f7f7f7;

}

.notice-tit ul{

    position: absolute;

    width: 301px;

    left: -1px;

}

.notice-tit ul li{

    float: left;

    width: 58px;

    height: 26px;

    text-align: center;

    line-height: 26px;

    overflow: hidden;

    padding: 0 1px;

    background: #f7f7f7;

    border-bottom: 1px solid #eee;

}

.notice-tit ul li.select{

    background: #fff;

    border-bottom-color: #fff;

    border-left: 1px solid #eee;

    border-right: 1px solid #eee;

    padding: 0;

    font-weight: bolder;

}

.notice li a:link,.notice-tit li a:visited{

    text-decoration: none;

    color: #000;

}

.notice li a:hover{

    color: #f90;

}

.notice-con .mod{

    margin: 10px 10px 10px 19px;

}

.notice-con .mod ul li{

    float: left;

    width: 134px;

    height: 25px;

    overflow: hidden;

}

　　try.js

function $(id){

    return typeof id==='string'?document.getElementById(id):id;

}

window.onload = function()

{

    var index=0;

    var timer=null;

    //获取鼠标滑过或点击的标签和要切换内容的元素

    var titles = $('notice-tit').getElementsByTagName('li');

    var divs  =$('notice-con').getElementsByTagName('div');

    // alert(divs.length);

    if(titles.length!=divs.length)

        return;

    for(var i=0;i<titles.length;i++){

        titles[i].id=i;

        titles[i].onmouseover=function(){

            // 用that这个变量来引用当前滑过的li

            var that=this;

            // 如果存在准备执行的定时器，立刻清除，只有当前停留时间大于500ms时才开始执行

            if(timer){

                clearTimeout(timer);

                timer=null;

            }

            // 延迟半秒执行

            timer=window.setTimeout(function(){

                for(var j=0;j<titles.length;j++){

                    titles[j].className='';

                    divs[j].style.display='none';

                }

                titles[that.id].className='select';

                divs[that.id].style.display='block';

            },500);

        }

    }

}

　　效果：

2017-09-05  20:32:11

Tab选项卡 延迟切换效果js实现的更多相关文章

  1. Tab选项卡 自动切换效果js实现

    try.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...

  2. 基于HTML5 Tab选项卡动画切换特效

    基于HTML5 Tab选项卡动画切换特效.这是一款基于HTML5+CSS3实现的带有动画切换效果的Tab选项卡插件cbpFWTabs.效果图如下: 在线预览   源码下载 实现的代码. html代码: ...

  3. 【Little Demo】左右按钮tab选项卡双切换

    通过前一篇文章 从简单的Tab标签到Tab图片切换 的说明,相关效果也就可以实现了. 1.左右按钮tab选项卡双切换 很明显,左右两个按钮是 absolute 布局,另外就是内容部分和Tab标签部分. ...

  4. 旋转木马幻灯片切换效果JS源码详解

    首先,放上慕课网的课程链接,源码是在这个课程里分享出来的,https://www.imooc.com/learn/386. 文章适合学习过这个课程的同学,再看这篇文章,可能有更深入的理解.主要是对各种 ...

  5. 无JavaScript实现选项卡轮转切换效果

    CSS:   .box{width:200px; height:100px; border:1px solid #ddd; overflow:hidden;}.list{width:200px; he ...

  6. CSS 制作 圆角TAB选项卡下拉效果(顺便学习CSS伪元素

    CSS伪元素: 伪元素如果没有设置“content”属性,伪元素是无用的. 使用伪元素插入的内容在页面的源码里是不可见的,只能在css里可见 插入的元素在默认情况下是内联元素(或者,在html5中,在 ...

  7. 手机端的tab切换，响应式切换效果

    之前写过这些tab切换的效果,无论网页上还是手机端,网上也有很多的例子,这个好像是我参考网上,也不知道是哪里的了.总结了一下,就当保存下来了把. <!DOCTYPE html > < ...

  8. [Jquery]tab页面切换效果

    思路:取得头部和内容的div,头部当前点击的高亮,其余的去除高亮,并通过index()方法获得当前点击的索引,然后内容div通过.eq(index)显示和隐藏 优化:当前做法,从第一个快速移到最后一个 ...

  9. weui 多网页切换效果分析

    weui的文档写的不怎么详尽,简单的来讲WeUI 为微信 Web 服务量身设计的h5框架. WeUI是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信 Web 开发量身设计,可以令用户 ...

随机推荐

  1. linux运维、架构之路-linux定时任务

    1.基础优化之开机启动服务优化 使用awk拼接的方式 [root@cache01 ~]# chkconfig |egrep -v "crond|network|sshd|rsyslog|sy ...

  2. spring boot和邮件服务

    1.运行环境 开发工具:intellij idea JDK版本:1.8 项目管理工具:Maven 4.0.0 2.GITHUB地址

  3. Linux内核设计与实现 总结笔记（第七章）中断和中断处理

    中断和中断处理 处理器的速度跟外围硬件设备的速度往往不再一个数量级上,因此,如果内核采取让处理器向硬件发出一个请求. 然后专门等待回应的办法,如果专门等待回应,明显太慢.所以等待期间可以处理其他事务, ...

  4. 请问有支持直接从 word 文档复制图片的 editor 吗

    Chrome+IE默认支持粘贴剪切板中的图片,但是我要发布的文章存在word里面,图片多达数十张,我总不能一张一张复制吧?Chrome高版本提供了可以将单张图片转换在BASE64字符串的功能.但是无法 ...

  5. 【HDOJ6638】Snowy Smile（线段树）

    题意:一个二维平面上有n个点,每个点的坐标是(x[i],y[i]),权值是w[i] 求一个矩形使得其中所有点的权值和最大,输出权值和 n<=2e3,x[i],y[i],w[i]的绝对值<= ...

  6. C# 中获取路径

    string str1 =Process.GetCurrentProcess().MainModule.FileName;//可获得当前执行的exe的文件名. string str2=Environm ...

  7. HDU 6121 Build a tree（k叉树的子树大小相异）

    http://acm.hdu.edu.cn/showproblem.php?pid=6121 题目大意: 给你一颗 n 个节点的完全 k 叉树,问你这棵树中所有子树结点个数的总异或值. 分析: 我们很 ...

  8. zabbix 接入钉钉机器人报警

    import requests import json import sys import os headers = {'Content-Type': 'application/json;charse ...

  9. WebApi系列~基于RESTful标准的Web Api 转载 https://www.cnblogs.com/lori/p/3555737.html

    微软的web api是在vs2012上的mvc4项目绑定发行的,它提出的web api是完全基于RESTful标准的,完全不同于之前的(同是SOAP协议的)wcf和webService,它是简单,代码 ...

  10. Java thread(4)

    这一块主要是讨论关于进程同步的相关问题,主要是考虑一下的关键字:锁对象.条件对象 -> synchronized wait() notify(). 1.关于锁对象与条件对象: 所对象的定义在ja ...