首页 > 代码库 > 利用setTimeOut 和clearTimeOut 方法控制写一个 滑动导航显示不同信息的效果
利用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="http://www.mamicode.com/#">公告</a></li>
<li data-flag="1"><a href="http://www.mamicode.com/#">规则</a></li>
<li data-flag="2"><a href="http://www.mamicode.com/#">论坛</a></li>
<li data-flag="3"><a href="http://www.mamicode.com/#">安全</a></li>
<li data-flag="4"><a href="http://www.mamicode.com/#">公益</a></li>
</ul>
</div>
<div class="tab-content" id="tab-content">
<div class="tabct" style="display: block">
<ul>
<li><a href="http://www.mamicode.com/#">淘宝招募卖家志愿者</a></li>
<li><a href="http://www.mamicode.com/#">淘宝招募卖家志愿者</a></li>
<li><a href="http://www.mamicode.com/#">淘宝招募卖家志愿者</a></li>
<li><a href="http://www.mamicode.com/#">淘宝招募卖家志愿者</a></li>
</ul>
</div>
<div class="tabct" style="display: none">
<ul>
<li><a href="http://www.mamicode.com/#">阿里推出兼职神器</a></li>
<li><a href="http://www.mamicode.com/#">阿里推出兼职神器</a></li>
<li><a href="http://www.mamicode.com/#">阿里推出兼职神器</a></li>
<li><a href="http://www.mamicode.com/#">阿里推出兼职神器</a></li>
</ul>
</div>
<div class="tabct" style="display: none">
<ul>
<li><a href="http://www.mamicode.com/#">700家热风淘宝路</a></li>
<li><a href="http://www.mamicode.com/#">700家热风淘宝路</a></li>
<li><a href="http://www.mamicode.com/#">700家热风淘宝路</a></li>
<li><a href="http://www.mamicode.com/#">700家热风淘宝路</a></li>
</ul>
</div>
<div class="tabct" style="display: none">
<ul>
<li><a href="http://www.mamicode.com/#">是赚钱还是骗子</a></li>
<li><a href="http://www.mamicode.com/#">是赚钱还是骗子</a></li>
<li><a href="http://www.mamicode.com/#">是赚钱还是骗子</a></li>
<li><a href="http://www.mamicode.com/#">是赚钱还是骗子</a></li>
</ul>
</div>
<div class="tabct" style="display: none">
<ul>
<li><a href="http://www.mamicode.com/#">淘宝用户必备神器</a></li>
<li><a href="http://www.mamicode.com/#">淘宝用户必备神器</a></li>
<li><a href="http://www.mamicode.com/#">淘宝用户必备神器</a></li>
<li><a href="http://www.mamicode.com/#">淘宝用户必备神器</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 = http://www.mamicode.com/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 方法控制写一个 滑动导航显示不同信息的效果
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。