利用setTimeOut 和clearTimeOut 方法控制写一个 滑动导航显示不同信息的效果
效果如图
鼠标滑动导航 下边显示不同效果
html代码和css格式代码
<body> <div id="tab" class="tab">
<div class="tab-title" id="tab-title">
<ul>
<li class="select" data-flag="0"><a href="#">公告</a></li>
<li data-flag="1"><a href="#">规则</a></li>
<li data-flag="2"><a href="#">论坛</a></li>
<li data-flag="3"><a href="#">安全</a></li>
<li data-flag="4"><a href="#">公益</a></li>
</ul>
</div>
<div class="tab-content" id="tab-content">
<div class="tabct" 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 class="tabct" 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="tabct" style="display: none">
<ul>
<li><a href="#">700家热风淘宝路</a></li>
<li><a href="#">700家热风淘宝路</a></li>
<li><a href="#">700家热风淘宝路</a></li>
<li><a href="#">700家热风淘宝路</a></li>
</ul>
</div>
<div class="tabct" 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="tabct" 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> </div>
</body> css样式：
<style>
body {
background-color: #eeeeee;
}
* {
margin: 0;
padding: 0;
list-style: none;
font-size: 12px;
}
a {
text-decoration: none;
color: #3C3C3C;
}
.tab {
width: 298px;
height: 98px;
/*overflow: hidden;*/
margin: 10px;
border: 1px solid #eeeeee;
background-color: #ffffff;
}
.tab-title {
width: 300px;
height: 26px;
}
.tab-title ul li {
float: left;
width: 58px;
height: 26px;
text-align: center;
line-height: 26px;
padding: 0 1px;
}
.tab-title ul {
width: 300px;
}
.tab-title ul li.select {
font-weight: 700;
border-bottom: 2px solid orange;
}
.tab li a:hover {
color: orange;
}
.tabct {
margin: 20px 10px;
overflow: hidden;
}
.tabct li {
float: left;
width: 139px;
height: 25px;
} </style>
js代码：
<script>
var lilist = document.getElementById("tab-title").getElementsByTagName("li"); // 获取到的是li标签的一个集合//先获取导航栏的li（利用链式选取）
var divlist = document.getElementsByClassName("tabct"); //获取到每个导航选项对应的 div内容集合
var timer = null ; //定义一个timer 方便后面使用setTimeOut和clearTimeOut方法
for(var i = 0;i<lilist.length;i++){ //因为有多个选项 所以利用for循环来简化代码 循环次数是 导航选项的个数
lilist[i].value = i; // 给导航里的li进行 value的赋值（li的属性中有value属性 可以读写）
为什么要给他赋值呢，因为要与每个对应的内容绑定 所以必须建立一个关系 通过value来建立 也可以
lilist[i].flag = i; 这里的flag是随便取的 （可以打印 lilist 然后在每一项的 dataset属性里面看到我们给他自定以的flag值，这里的flag名字是随便起的）
也可以 在HTML中 给导航的每个li 设置 data- 加上 自己定义的名字 然后赋值 ，例如：data-haha = “1”；
lilist[i].onmouseover = function(e){ //对每个导航巷进行鼠标进入时显示内容事件
var that = this; // this 是鼠标滑动绑定的真正触发者，也就是 lilist[i]; 为什么 用一个that变量承载呢，因为后面我们需要用到该指定；
timer = setTimeOut( //设定导航选项延迟触发，
function(){
for(var i = 0;i<lilist.length;i++){ // 在事件触发时候 需要先将 所以导航项的className制空，以及display制none值
if(lilist[i].className=='select'){
lilist[i].className=""; //制空className
divlist[i].style.display='none'; 改变display值
break; //因为页面里只设置了一个className=select的li 所以找到它清除退出循环就可以了
}
｝
that.className = "select"; // 将事件触发者的className 设置成select；这里that 就代表事件触发者；
divlist[that.dataset.flag].style.display='block'; //显示对于的内容
}
，300 //延长时间300 毫秒
)
}
lilist[i].onmouseout=function(){
clearTimeOut(timer); // 清楚Settimeout事件使得导航在 快速滑动的时候 不会发生内容的闪动
}
} </script>
利用setTimeOut 和clearTimeOut 方法控制写一个 滑动导航显示不同信息的效果的更多相关文章
- 用Python写一个滑动验证码
1.准备阶段 滑动验证码我们可以直接用GEETEST的滑动验证码. 打开网址:https://www.geetest.com/ ,找到技术文档中的行为验证,打开部署文档,点击Python,下载ZIP包 ...
- 微信小程序 使用swiper制作一个滑动导航
最近在做一个导航的时候,发现使用overflow-x: auto来做多内容滑动导航效果很不好,思索是不是可以使用swiper来做一个,研究了下其实发现原理基本相同 这里说下,要用swiper做导航菜单 ...
- js在IE8+兼容String没有trim方法，写一个兼容ie8一下的浏览器的trim()方法
方法一: String.prototype.trim = function(){ return Trim(this);}; function LTrim(str) { var i; fo ...
- 【真的是随笔】如何利用htaccess把网站流量引到一个页面上（站点维护页效果）
咕咕咕,好久没来博客园转悠了,最近(这个最近好长啊)一直没时间写博(事实上也不知道写点什么有逼格的东西),所以一直都在潜水,,,(此处省略n字) 好了切入正题,关于如何把网站的所有流量引向一个页面的方 ...
- [前端]如何写一个水平导航栏？（浮动、inline-block+消除间距）
在看W3school时,看到一个很好的例子,如何制作一个水平的导航栏?没有任何要求,只需要达到下面的效果: 我认为这个例子包含了很多css布局需要了解的知识,因此单独写一下. W3school上面的方 ...
- python 学习笔记 12 -- 写一个脚本获取城市天气信息
近期在玩树莓派,前面写过一篇在树莓派上使用1602液晶显示屏,那么可以显示后最重要的就是显示什么的问题了. 最easy想到的就是显示时间啊,CPU利用率啊.IP地址之类的.那么我认为呢,假设可以显示当 ...
- 用React写一个工大导航
Online: https://brenner8023.github.io/gdut-nav/ GitHub地址: https://github.com/brenner8023/gdut-nav 笔者 ...
- css3样式控制（鼠标滑过 显示标注信息）
<div class="item"> <h1>A</h1> <div class="tooltip"> < ...
- 都是用 DllImport？有没有考虑过自己写一个 extern 方法？
你做 .NET 开发的时候,一定用过 DllImport 这个特性吧,这货是用于 P/Invoke (Platform Invoke, 平台调用) 的.这种 DllImport 标记的方法都带有一个 ...
随机推荐
- php设计模式：工厂模式
php设计模式:工厂模式 意图: 定义一个用于创建对象的接口,让子类决定实例化哪一个类. 工厂模式实现: 工厂模式中任何创建对象的工厂类都要实现这个接口,实现接口的方法体中都要实现接口中的方法,它声明 ...
- 2014年度辛星html教程夏季版第二节
上面一节中我们介绍了HTML文件的书写和几个标签,接下来我们来认识几个其他的标签,这里我们主要介绍一下head标签和文本标签. ***************head标签*************** ...
- Docker系列
Docker学习系列(五):Dockerfile文件 什么是Dockerfile? 它是一个名称为Dockerfile的文件 它是一个脚本文件,由一系列命令和参数构成 Dockerfile是自动构建d ...
- Morgan stanley 电话面试
首先是聊项目, 不会涉及到具体的技术问题 1.C和C++的区别:C++里的RTTI 2.vector 和 list的区别 : casting operator ; smart pointer. 3.数 ...
- 模型 - 视图 - 控制器（MVC）详解
模型视图控制器(MVC)一个相当实用且十分流行的设计模式.作为一位称职码农,你不可能没听说过吧. 不幸的是它难以让人理解. 在本文中,我将给出我认为是MVC的最简单的解释,以及为什么你应该使用它. 什 ...
- bzoj 3823: 定情信物 线性筛逆元
3823: 定情信物 Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 108 Solved: 2[Submit][Status] Descriptio ...
- HTML5解决跨域问题
HTML5解决跨域问题 由于浏览器的同源策略,网络连接的跨域访问是不被允许的,XHR对象不能直接与非同源的网站处理数据交互.而同源指的是什么呢?同源的范畴包括:规则(协议),主机号(域名.ip等),端 ...
- Cloud Insight！StatsD 系监控产品新宠！
年关将至,Cloud Insight 正式版悄然上线了.没有大张旗鼓的宣传,也没有热热闹闹的庆祝,只是一群人在上线前踏踏实实的优化了两周,然后发版,就是这样一件简单的事. 然而就是这样一个低调的产品, ...
- 安卓开发中，什么样的功能适合抽取成 Library？
我们都知道如果将所有的功能都写成 Library,那么我们在编写应用程序的时候就可以快速便捷的写出想要的功能,因为这些已经事先都实现过了,这样在写代码的时候就可以迅速的将 Library 依赖到我们的 ...
- iOS各种系统通知Name
当了一次搬运工,原地址:http://blog.csdn.net/db905517804/article/details/50569949 用法: - (void) viewWillAppear:(B ...