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 开发量身设计,可以令用户 ...
随机推荐
- Android逆向之旅---解析编译之后的Dex文件格式
一.前言 新的一年又开始了,大家是否还记得去年年末的时候,我们还有一件事没有做,那就是解析Android中编译之后的classes.dex文件格式,我们在去年的时候已经介绍了: 如何解析编译之后的xm ...
- Photon学习(一)——Photon Networking Free网络组件学习
一般前端untiy程序员都很想自己学会后端网络编程,这样一个人就可以把前后端都做了,做网络游戏可比单机游戏好玩多了,笔者我对喜欢的就是mmo多人对战游戏,一起组队打副本,一起体验多人对战的乐趣.从业以 ...
- (转)原理到实现 | K8S 存储之 NFS
转:https://mp.weixin.qq.com/s/Mrr1Rnl_594Gyyn9fHekjw 1NFS介绍 NFS是Network File System的简写,即网络文件系统,NFS是Fr ...
- HDU 6024 Building Shops (简单dp)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=6024 题意:有n个room在一条直线上,需要这这些room里面建造商店,如果第i个room建造,则要总 ...
- 最长上升子序列(LIS)题目合集
有关最长上升子序列的详细算法解释在http://www.cnblogs.com/denghaiquan/p/6679952.html 1)51nod 1134 一题裸的最长上升子序列,由于N<= ...
- http代理工具delphi源码
http://www.caihongnet.com/content/xingyexinwen/2013/0721/730.html http代理工具delphi源码 以下代码在 DELPHI7+IND ...
- pandas 增删改查
原文链接:https://blog.csdn.net/zhangchuang601/article/details/79583551 准备工作:增.删.改.查的方法有很多很多种,这里只展示出常用的几种 ...
- Vagrant 手册之 Vagrantfile - 概述
原文地址 Vagrantfile 的主要用途是描述用于项目的机器类型,以及如何配置和提供这些机器. Vagrant 的每个项目运行一个 Vagrantfile,并且 Vagrantfile 应该被提交 ...
- 20190815 On Java8 第五章 控制流
第五章 控制流 迭代语句 逗号操作符 在 Java 中逗号运算符(这里并非指我们平常用于分隔定义和方法参数的逗号分隔符)仅有一种用法:在 for 循环的初始化和步进控制中定义多个变量.我们可以使用逗号 ...
- oracle--用户区别sys和system
1.数据库的启动需要以SYSDBA/SYSOPER身份登录. 2.如果在同一主机上使用IPC连接到数据库使用操作系统授权,登录任何一个用户都可以拥有as sysdba和as sysoper. 3.sy ...