Tab选项卡 延迟切换效果js实现
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实现的更多相关文章
- Tab选项卡 自动切换效果js实现
try.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...
- 基于HTML5 Tab选项卡动画切换特效
基于HTML5 Tab选项卡动画切换特效.这是一款基于HTML5+CSS3实现的带有动画切换效果的Tab选项卡插件cbpFWTabs.效果图如下: 在线预览 源码下载 实现的代码. html代码: ...
- 【Little Demo】左右按钮tab选项卡双切换
通过前一篇文章 从简单的Tab标签到Tab图片切换 的说明,相关效果也就可以实现了. 1.左右按钮tab选项卡双切换 很明显,左右两个按钮是 absolute 布局,另外就是内容部分和Tab标签部分. ...
- 旋转木马幻灯片切换效果JS源码详解
首先,放上慕课网的课程链接,源码是在这个课程里分享出来的,https://www.imooc.com/learn/386. 文章适合学习过这个课程的同学,再看这篇文章,可能有更深入的理解.主要是对各种 ...
- 无JavaScript实现选项卡轮转切换效果
CSS: .box{width:200px; height:100px; border:1px solid #ddd; overflow:hidden;}.list{width:200px; he ...
- CSS 制作 圆角TAB选项卡下拉效果(顺便学习CSS伪元素
CSS伪元素: 伪元素如果没有设置“content”属性,伪元素是无用的. 使用伪元素插入的内容在页面的源码里是不可见的,只能在css里可见 插入的元素在默认情况下是内联元素(或者,在html5中,在 ...
- 手机端的tab切换，响应式切换效果
之前写过这些tab切换的效果,无论网页上还是手机端,网上也有很多的例子,这个好像是我参考网上,也不知道是哪里的了.总结了一下,就当保存下来了把. <!DOCTYPE html > < ...
- [Jquery]tab页面切换效果
思路:取得头部和内容的div,头部当前点击的高亮,其余的去除高亮,并通过index()方法获得当前点击的索引,然后内容div通过.eq(index)显示和隐藏 优化:当前做法,从第一个快速移到最后一个 ...
- weui 多网页切换效果分析
weui的文档写的不怎么详尽,简单的来讲WeUI 为微信 Web 服务量身设计的h5框架. WeUI是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信 Web 开发量身设计,可以令用户 ...
随机推荐
- GEI步态能量图生成
步态能量图生成主要有两步,主要为: 在原始轮廓图上对人的轮廓进行裁剪,在下面制作步态能量图图片叠加以什么为中心位置也是一个问题.一般有两种方式,一种是中心位置为人体宽的一半.另一种是以头顶为中心位置. ...
- Codeforces Round #585 (Div. 2) E. Marbles （状压DP）
题目:https://codeforc.es/contest/1215/problem/E 题意:给你一个序列,你可以交换相邻的两个数,要达到一个要求,所有相同的数都相邻,问你交换次数最少是多少 思路 ...
- 生产环境下，oracle不同用户间的数据迁移。第三部分
任务名称:生产环境下schema ELON数据迁移至schema TIAN########################################前期准备:1:确认ELON用户下的对象状态se ...
- NuGet-Doc：NuGet.Server
ylbtech-NuGet-Doc:NuGet.Server 1.返回顶部 1. NuGet.Server 2018/03/13 NuGet.Server 是由 .NET Foundation 提供的 ...
- linux 复制到远程服务器
scp 文件路径 root@192.168.0.1:文件夹路径 会提示你输入远程服务器密码
- LeetCode 112. Path Sum 动态演示
给一个目标值,判断一棵树从根到叶子是否至少有一条路径加起来的和等于目标值 比较典型的深度优先算法. 引入一个全局变量bResult, 一旦找到一条,就不再搜索其他的了. class Solution ...
- 关于VMWare的几种网络模式
具体的可以参考这个博文:http://zhenyaliu.blog.163.com/blog/static/2377571920103775447527/
- jQury+Ajax与C#后台交换数据
-------------------------------------------jQury+Ajax调用后台方法----------------------------------------- ...
- 21.线程,全局解释器锁(GIL)
import time from threading import Thread from multiprocessing import Process #计数的方式消耗系统资源 def two_hu ...
- Robotframework使用自写库连接mysql数据库
Robotframework使用自写库连接mysql数据库 新建库文件mysqltest.py 代码如下: # -*- coding: utf-8 -*- import MySQLdbimport o ...