发新贴  快速回复

请老师看一下我的作业!功能有些问题,一个一个移入移除时可以实现,但当倒着移入li时就不能实现了,不知怎么回事了?

李宁认真学习
2017-11-14 21:12

<!DOCTYPE html>

<html>

 

<head>

<meta charset="UTF-8">

<title></title>

<style type="text/css">

ul,

li {

margin: 0;

padding: 0;

}

 

#qq {

width: 400px;

height: 50px;

background: hotpink;

}

 

#qq li {

float: left;

list-style: none;

margin-right: 20px;

line-height: 50px;

;

}

 

.title {

width: 300px;

height: 30px;

background: powderblue;

display: none;

position: absolute;

top: 70px;

left: 10px;

}

 

.title li {

float: left;

margin-right: 20px;

list-style: none;

line-height: 30px;

 

}

</style>

<script>

window.onload = function() {

var qq = document.getElementById("qq");

var aLi = qq.getElementsByTagName("li");

var title = document.getElementById("title");

var aDiv = title.getElementsByTagName("div");

var timer = null;

for(var i = 0; i < aLi.length; i++) {

aLi[i].index = i;

aDiv[i].index = i;

aLi[i].onmouseover = show;

aLi[i].onmouseout = hide;

 

aDiv[i].onmouseover = show;

aDiv[i].onmouseout = hide;

 

}

 

function hide() {

timer = setTimeout(function() {

for(var i = 0; i < aDiv.length; i++) {

aDiv[i].style.display = "none";

}

}, 200)

}

 

function show() {

clearTimeout(timer)

aDiv[this.index].style.display = "block";

}

 

}

</script>

 

</head>

 

<body>

<div id="qq">

<ul>

<li>

<a href="javascript:;">首页</a>

</li>

<li>

<a href="javascript:;">关于我们</a>

</li>

<li>

<a href="javascript:;">作品</a>

</li>

<li>

<a href="javascript:;">博客</a>

</li>

</ul>

</div>

 

<div id="title">

<div class="title">

<ul>

<li>

<a href="javascript:;">1111</a>

</li>

<li>

<a href="javascript:;">1111</a>

</li>

<li>

<a href="javascript:;">1111</a>

</li>

<li>

<a href="javascript:;">1111</a>

</li>

</ul>

</div>

<div class="title">

<ul>

<li>

<a href="javascript:;">222</a>

</li>

<li>

<a href="javascript:;">222</a>

</li>

<li>

<a href="javascript:;">222</a>

</li>

<li>

<a href="javascript:;">222</a>

</li>

</ul>

</div>

<div class="title">

<ul>

<li>

<a href="javascript:;">333</a>

</li>

<li>

<a href="javascript:;">333</a>

</li>

<li>

<a href="javascript:;">333</a>

</li>

<li>

<a href="javascript:;">333</a>

</li>

</ul>

</div>

<div class="title">

<ul>

<li>

<a href="javascript:;">444</a>

</li>

<li>

<a href="javascript:;">444</a>

</li>

<li>

<a href="javascript:;">444</a>

</li>

<li>

<a href="javascript:;">444</a>

</li>

</ul>

</div>

</div>

 

</body>

 

</html>

附件下载:
 

本帖内容针对以下视频发布:

6-定时器应用-自动切换焦点图、QQ延时菜单实例
 
童童

同学你好,


你打开控制面板,


然后再移动,


你会发现,所有元素移入一次之后,


会把所有的div显示出来,


你说的从左往右移入正常是因为,后面显示的元素把前面的覆盖了


如果从右往左移动,后面的先出现,层级又比前面的高,所以看不到前面显示的元素.


解决:


移出元素的时候,把对应的div隐藏掉,确保只有一个div在下方显示


 


 

2017-11-16 16:50  回复本帖
李宁认真学习

童童 2017-11-16 16:50发表的内容:

同学你好,


你打开控制面板,


然后再移动,


你会发现,所有元素移入一次之后,


会把所有的div显示出来,


你说的从左往右移入正常是因为,后面显示的元素把前面的覆盖了


如果从右往左移动,后面的先出现,层级又比前面的高,所以看不到前面显示的元素.


解决:


移出元素的时候,把对应的div隐藏掉,确保只有一个div在下方显示


 


 

移除元素时,我不是把所有的div都隐藏了吗?
aDiv[i].style.display = "none"
还是不会写么?请老师指教一下?
2017-11-21 20:36  回复本帖
李宁认真学习

李宁认真学习 2017-11-21 20:36发表的内容:

移除元素时,我不是把所有的div都隐藏了吗?
aDiv[i].style.display = "none"
还是不会写么?请老师指教一下?
对于老师所说的移除后,确保有一个div显示,不知该怎么实现?
2017-11-21 20:37  回复本帖
李宁认真学习

李宁认真学习 2017-11-21 20:37发表的内容:

对于老师所说的移除后,确保有一个div显示,不知该怎么实现?
aDiv[this.index].style.display = "none";
在没有加定时器时效果能出来,当一加定时器时就不行了?
timer = setInterval(function (){
aDiv[this.index].style.display = "none";
},200)
2017-11-21 20:46  回复本帖
 
童童

同学你好,


这个问题已经在你的另一个问题上回答了,


 


这是 是定时器 内部this指向的问题


这里是你的问题的链接~:


http://2017.miaov.com/bbs/58197

2017-11-22 17:16  回复本帖
登录 后才可以发表回复