try.html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title></title>
  6.     <link rel="stylesheet" type="text/css" href="try.css">
  7.     <script type="text/javascript" src="try.js"></script>
  8. </head>
  9. <body>
  10. <div id="notice" class="notice">
  11.     <div class="notice-tit" id="notice-tit">
  12.         <ul>
  13.             <li><a href="#">公告</a></li>
  14.             <li><a href="#">规则</a></li>
  15.             <li><a href="#">论坛</a></li>
  16.             <li><a href="#">安全</a></li>
  17.             <li class="select"><a href="#">公益</a></li>
  18.         </ul>
  19.     </div>
  20.     <div id="notice-con" class="notice-con">
  21.         <div class="mod" style="display: none;">
  22.             <ul>
  23.                 <li><a href="#">张勇：玩快乐足球</a></li>
  24.                 <li><a href="#">张勇：玩快乐足球</a></li>
  25.                 <li><a href="#">张勇：玩快乐足球</a></li>
  26.                 <li><a href="#">张勇：玩快乐足球</a></li>
  27.             </ul>
  28.         </div>
  29.         <div class="mod" style="display: none;">
  30.             <ul>
  31.                 <li><span>[<a href="#">通知</a>]</span><a href="#">张勇：要玩快乐足球</a></li>
  32.                 <li><span>[<a href="#">通知</a>]</span><a href="#">张勇：要玩快乐足球</a></li>
  33.                 <li><span>[<a href="#">通知</a>]</span><a href="#">张勇：要玩快乐足球</a></li>
  34.                 <li><span>[<a href="#">通知</a>]</span><a href="#">张勇：要玩快乐足球</a></li>
  35.             </ul>
  36.         </div>
  37.         <div class="mod" style="display: none;">
  38.             <ul>
  39.                 <li><span>[<a href="#">通知</a>]</span><a href="#">张勇：玩快乐足球</a></li>
  40.                 <li><span>[<a href="#">通知</a>]</span><a href="#">张勇：玩快乐足球</a></li>
  41.                 <li><span>[<a href="#">通知</a>]</span><a href="#">张勇：玩快乐足球</a></li>
  42.                 <li><span>[<a href="#">通知</a>]</span><a href="#">张勇：玩快乐足球</a></li>
  43.             </ul>
  44.         </div>
  45.         <div class="mod" style="display: none;">
  46.             <ul>
  47.                 <li><a href="#">张勇：要玩快乐</a></li>
  48.                 <li><a href="#">张勇：要玩快乐足球</a></li>
  49.                 <li><a href="#">张勇：要玩快乐足球</a></li>
  50.                 <li><a href="#">张勇：要玩快乐足球</a></li>
  51.             </ul>
  52.         </div>
  53.         <div class="mod" style="display: block;">
  54.             <ul>
  55.                 <li><a href="#">张勇：要玩快乐</a></li>
  56.                 <li><a href="#">张勇：要玩快乐足球</a></li>
  57.                 <li><a href="#">张勇：要玩快乐足球</a></li>
  58.                 <li><a href="#">张勇：要玩快乐</a></li>
  59.             </ul>
  60.         </div>
  61.     </div>
  62. </div>
  63. </body>
  64. </html>

　try.css　

  1. *{
  2.     margin: 0;
  3.     padding:0;
  4.     list-style: none;
  5.     font-size: 12px;
  6. }
  7. .notice{
  8.     width: 298px;
  9.     height: 98px;
  10.     margin: 10px;
  11.     border: 1px solid #eee;
  12.     overflow: hidden;
  13. }
  14. .notice-tit{
  15.     height: 27px;
  16.     position: relative;
  17.     background-color: #f7f7f7;
  18. }
  19. .notice-tit ul{
  20.     position: absolute;
  21.     width: 301px;
  22.     left: -1px;
  23. }
  24. .notice-tit ul li{
  25.     float: left;
  26.     width: 58px;
  27.     height: 26px;
  28.     text-align: center;
  29.     line-height: 26px;
  30.     overflow: hidden;
  31.     padding: 0 1px;
  32.     background: #f7f7f7;
  33.     border-bottom: 1px solid #eee;
  34.  
  35. }
  36. .notice-tit ul li.select{
  37.     background: #fff;
  38.     border-bottom-color: #fff;
  39.     border-left: 1px solid #eee;
  40.     border-right: 1px solid #eee;
  41.     padding: 0;
  42.     font-weight: bolder;
  43. }
  44. .notice li a:link,.notice-tit li a:visited{
  45.     text-decoration: none;
  46.     color: #000;
  47. }
  48. .notice li a:hover{
  49.     color: #f90;
  50. }
  51. .notice-con .mod{
  52.     margin: 10px 10px 10px 19px;
  53. }
  54. .notice-con .mod ul li{
  55.     float: left;
  56.     width: 134px;
  57.     height: 25px;
  58.     overflow: hidden;
  59. }

　　try.js

  1. function $(id){
  2.     return typeof id==='string'?document.getElementById(id):id;
  3. }
  4. window.onload = function()
  5. {
  6.     var index=0;
  7.     var timer=null;
  8.  
  9.     //获取鼠标滑过或点击的标签和要切换内容的元素
  10.     var titles = $('notice-tit').getElementsByTagName('li');
  11.     var divs  =$('notice-con').getElementsByTagName('div');
  12.     // alert(divs.length);
  13.     if(titles.length!=divs.length)
  14.         return;
  15.  
  16.     for(var i=0;i<titles.length;i++){
  17.         titles[i].id=i;
  18.         titles[i].onmouseover=function(){
  19.             // 用that这个变量来引用当前滑过的li
  20.             var that=this;
  21.             // 如果存在准备执行的定时器，立刻清除，只有当前停留时间大于500ms时才开始执行
  22.             if(timer){
  23.                 clearTimeout(timer);
  24.                 timer=null;
  25.             }
  26.             // 延迟半秒执行
  27.             timer=window.setTimeout(function(){
  28.                 for(var j=0;j<titles.length;j++){
  29.                     titles[j].className='';
  30.                     divs[j].style.display='none';
  31.                 }
  32.                 titles[that.id].className='select';
  33.                 divs[that.id].style.display='block';
  34.             },500);
  35.         }
  36.     }
  37. }

　　效果：

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运维、架构之路-ansible批量管理

    一.ansible软件 1.介绍 ①ansible是一个基于Python开发的自动化运维工具 ②其功能实现基于SSH远程连接服务 ③ansible可以实现批量系统配置.批量软件部署.批量文件拷贝.批量 ...

  2. OC + RAC (三) 信号中的信号

    -(void)_test3{ RACSubject *signalofsignal = [RACSubject subject]; //信号中的信号(也就是发送的数据是信号) RACSubject * ...

  3. 6，Stack

    一,Stack简介 Stack是栈.它的特性是:先进后出(FILO, First In Last Out). java工具包中的Stack是继承于Vector(矢量队列)的,由于Vector是通过数组 ...

  4. Python_002(基础知识)

    1.格式化输出 %s:字符串的占位符,可以放置任何内容(数字) 代码展示:%去除法 admin_input1 = input("请输入用户名:") pass_input = inp ...

  5. 提示”The following modules are missing or built with a different engine version”

    一台机器使用自行编译版本引擎修改了工程后,另一台机器也使用自行编译版本引擎编辑该工程,有时会出现标题的提示 解决办法: 打开\Engine\Binaries\Win64\UE4Editor.modul ...

  6. 动态规划 List

    例题 #A 传纸条(Accepted)    #B 乘积最大 (Unaccepted)    #C 石子合并 (Accepted)    #D 加分二叉树 (Unaccepted)    #E 没有上 ...

  7. Sultana后记：纯css也能写col,select,datepicker,carousel...

    未完待续 背景 如今css3越来越发达,focus-within等属性也已经开始在Chrome得到支持.如果有出色的css功底,一点点ps技能,你也能用css3配合原生html标签写出优秀的框架.通过 ...

  8. HDU6719 Strassen（__int128）

    HDU6719 Strassen 直接照题目模拟,数据范围最大不会超过__int128. 时间复杂度为 \(O(\log n)\) . #include<bits/stdc++.h> us ...

  9. Mac自带服务器的应用

    Mac OS下自带了apache,方便部署一些静态数据(html,css,js,xml,图片等数据) 一.系统默认路径 系统默认是隐藏apache安装目录的,但我们可以通过“命令行”或者“文件夹前往” ...

  10. 像计算机科学家一样思考python－第2章 变量、表达式和语句

    感想: 1.程序出现语义错误时,画状态图是一个很好的调试办法.打印出关键变量在不同代码处理后值的变化,就能发现问题的蛛丝马迹. 2.每当学习新语言特性时,都应当在交互模式中进行尝试,并故意犯下错误,看 ...