87,921
社区成员
发帖
与我相关
我的任务
分享事件触发函数的问题
以下是我的测试代码，我想实现一种功能就是当层div1被onmouseover时展开div2,div1被onmouseout地收缩div2,但当div2被onmouseover时div2不收缩，只有div1或div2被onmouseout时div2才收缩，但div2被onmouseover时已经onmouseout div1了，即div2由于div1被onmouseout而收缩。我想问怎么设计使div2被onmouseover且div1被onmouseout时，层div2不会收缩?有没有朋友能给点tips呢？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
<!--
#div1{position:relative;height:25px;width:60px;background-color:#FFD5AA;}
#div2{position:absolute;top:25px;left:0px;background-color:#B5FFB5;}
-->
</style>
<script type="text/javascript">
<!--
window.onload=function(){
$("div1").onmouseover=function(){
if ($("div2").style.width != "0px") return;
$("div2").style.display = "block";
expand($("div2"),"+",140,"block");
}
$("div1").onmouseout=function(){
if ($("div2").style.width != "140px") return;
expand($("div2"),"-",0,"none");
}
/*$("div2").onmouseover=function(){
if (stop){
clearTimeout(stop);
}
}*/
}
function expand(o,fuhao,wh,dis){
eval("var th = parseInt(o.style.height)"+fuhao+"5");
eval("var tw = parseInt(o.style.width)"+fuhao+"5");
o.style.height = th+"px";
o.style.width = tw+"px";
stop = setTimeout(function(){ expand(o,fuhao,wh,dis) },10);
if (th == wh || tw == wh){
clearTimeout(stop);
o.style.display = dis;
}
}
function $(oid){
return document.getElementById(oid);
}
//-->
</script>
</head>
<body>
<div id="div1">
<div id="div2" style="width:0px;height:0px;display:none;"></div>
</div>
</body>
</html>
...全文
请发表友善的回复…
发表回复
dhq314 2008-11-20
- 打赏
- 举报
好多谢大家的热心回答，从大家的回答中真的学到了好多，真的多谢啦。
cloudgamer 2008-11-19
- 打赏
- 举报
可以用contains判断一下
ganglong99 2008-11-19
- 打赏
- 举报
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
<!--
#div1{position:relative;height:25px;width:60px;background-color:#FFD5AA;}
#div2{position:absolute;top:25px;left:0px;background-color:#B5FFB5;}
-->
</style>
<script type="text/javascript">
<!--
window.onload=function(){
var yt = null;
$("div1").onmouseover=function(){
if(yt) clearTimeout(yt);
if ($("div2").style.width != "0px") return;
$("div2").style.display = "block";
expand($("div2"),"+",140,"block");
}
$("div1").onmouseout=function(){
if ($("div2").style.width != "140px") return;
if(yt) clearTimeout(yt);
yt = setTimeout(function(){
expand($("div2"),"-",0,"none")
}, 50);
}
$("div2").onmouseover=function(){
clearTimeout(yt);
}
$("div2").onmouseout=function(){
if(yt) clearTimeout(yt);
yt = setTimeout(function(){
expand($("div2"),"-",0,"none")
}, 50);
}
}
function expand(o,fuhao,wh,dis){
eval("var th = parseInt(o.style.height)"+fuhao+"5");
eval("var tw = parseInt(o.style.width)"+fuhao+"5");
o.style.height = th+"px";
o.style.width = tw+"px";
stop = setTimeout(function(){ expand(o,fuhao,wh,dis) },10);
if (th == wh || tw == wh){
clearTimeout(stop);
o.style.display = dis;
}
}
function $(oid){
return document.getElementById(oid);
}
//-->
</script>
</head>
<body>
<div id="div1">
<div id="div2" style="width:0px;height:0px;display:none;"></div>
</div>
</body>
</html>
楼上的可以！
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
<!--
#div1{position:relative;height:25px;width:60px;background-color:#FFD5AA;}
#div2{position:absolute;top:25px;left:0px;background-color:#B5FFB5;}
-->
</style>
<script type="text/javascript">
<!--
window.onload=function(){
var yt = null;
$("div1").onmouseover=function(){
if(yt) clearTimeout(yt);
if ($("div2").style.width != "0px") return;
$("div2").style.display = "block";
expand($("div2"),"+",140,"block");
}
$("div1").onmouseout=function(){
if ($("div2").style.width != "140px") return;
if(yt) clearTimeout(yt);
yt = setTimeout(function(){
expand($("div2"),"-",0,"none")
}, 50);
}
$("div2").onmouseover=function(){
clearTimeout(yt);
}
$("div2").onmouseout=function(){
if(yt) clearTimeout(yt);
yt = setTimeout(function(){
expand($("div2"),"-",0,"none")
}, 50);
}
}
function expand(o,fuhao,wh,dis){
eval("var th = parseInt(o.style.height)"+fuhao+"5");
eval("var tw = parseInt(o.style.width)"+fuhao+"5");
o.style.height = th+"px";
o.style.width = tw+"px";
stop = setTimeout(function(){ expand(o,fuhao,wh,dis) },10);
if (th == wh || tw == wh){
clearTimeout(stop);
o.style.display = dis;
}
}
function $(oid){
return document.getElementById(oid);
}
//-->
</script>
</head>
<body>
<div id="div1">
<div id="div2" style="width:0px;height:0px;display:none;"></div>
</div>
</body>
</html>
楼上的可以！
Longinc 2008-11-19
- 打赏
- 举报
帮顶 学习
不悲不喜 2008-11-19
- 打赏
- 举报
也请帮我找找7楼的代码有没有什么问题？
不悲不喜 2008-11-19
- 打赏
- 举报
11楼的要好一些，
不好鼠标快速的在div1中移入移出几次后，
div2就再也不动了。
不好鼠标快速的在div1中移入移出几次后，
div2就再也不动了。
cgisir 2008-11-19
- 打赏
- 举报
思路
div1 out的时候开始计时 yt = setTimeout(expand, 50);
div2 over的时候如果有div1的计时器就清除掉, 不让他执行 expand, clearTimeout(yt);
代码
div1 out的时候开始计时 yt = setTimeout(expand, 50);
div2 over的时候如果有div1的计时器就清除掉, 不让他执行 expand, clearTimeout(yt);
代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
<!--
#div1{position:relative;height:25px;width:60px;background-color:#FFD5AA;}
#div2{position:absolute;top:25px;left:0px;background-color:#B5FFB5;}
-->
</style>
<script type="text/javascript">
<!--
window.onload=function(){
var yt = null;
$("div1").onmouseover=function(){
if(yt) clearTimeout(yt);
if ($("div2").style.width != "0px") return;
$("div2").style.display = "block";
expand($("div2"),"+",140,"block");
}
$("div1").onmouseout=function(){
if ($("div2").style.width != "140px") return;
if(yt) clearTimeout(yt);
yt = setTimeout(function(){
expand($("div2"),"-",0,"none")
}, 50);
}
$("div2").onmouseover=function(){
clearTimeout(yt);
}
$("div2").onmouseout=function(){
if(yt) clearTimeout(yt);
yt = setTimeout(function(){
expand($("div2"),"-",0,"none")
}, 50);
}
}
function expand(o,fuhao,wh,dis){
eval("var th = parseInt(o.style.height)"+fuhao+"5");
eval("var tw = parseInt(o.style.width)"+fuhao+"5");
o.style.height = th+"px";
o.style.width = tw+"px";
stop = setTimeout(function(){ expand(o,fuhao,wh,dis) },10);
if (th == wh || tw == wh){
clearTimeout(stop);
o.style.display = dis;
}
}
function $(oid){
return document.getElementById(oid);
}
//-->
</script>
</head>
<body>
<div id="div1">
<div id="div2" style="width:0px;height:0px;display:none;"></div>
</div>
</body>
</html>
不悲不喜 2008-11-19
- 打赏
- 举报
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
<!-- #div1 {
position: relative;
height: 25px;
width: 60px;
background-color: #FFD5AA;
} #div2 {
position: absolute;
top: 25px;
left: 0px;
background-color: #B5FFB5;
}
-->
</style>
<script type="text/javascript">
<!--
var stop = null;
window.onload = function(){
$("div1").onmouseover = mouseOver;
function mouseOver(e){
e = e || window.event;
if (stop) {
clearTimeout(stop);
}
$("div2").style.display = "block";
expand($("div2"), "+", 140, "block");
}
$("div1").onmouseout = $("div2").onmouseout = function(e){
e = e || window.event;
var elFrom = e.fromElement || e.target;
var elTo = e.toElement || e.relatedTarget;
if ((elFrom.id == "div1" && elTo.id == "div2") ||
(elFrom.id == "div2" && elTo.id == "div1")) {
return;
}
if (stop) {
clearTimeout(stop);
}
expand($("div2"), "-", 0, "none");
}
}
function expand(o, fuhao, wh, dis){
if (parseInt(o.style.height) == wh ||
parseInt(o.style.height) == wh) {
clearTimeout(stop);
o.style.display = dis;
stop = null;
return;
}
eval("var th = parseInt(o.style.height)" + fuhao + "5");
eval("var tw = parseInt(o.style.height)" + fuhao + "5");
o.style.height = th + "px";
o.style.width = tw + "px";
stop = setTimeout(function(){
expand(o, fuhao, wh, dis)
}, 10);
}
function $(oid){
return document.getElementById(oid);
} //-->
</script>
</head>
<body>
<div id="div1">
<div id="div2" style="width:0px;height:0px;display:none;">
</div>
</div>
</body>
</html>
Go 旅城通票 2008-11-19
- 打赏
- 举报
扩展ff下的contains，然后判断下是否包含就可以了
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
<!--
#div1{position:relative;height:25px;width:60px;background-color:#FFD5AA;}
#div2{position:absolute;top:25px;left:0px;background-color:#B5FFB5;}
-->
</style>
<script type="text/javascript">
<!--
//=======ff的contains扩展
if(typeof(HTMLElement)!="undefined")HTMLElement.prototype.contains=function(o){
if(o==this)return true;
while(o=o.parentNode)if(o==this)return true;
return false;
}
window.onload=function(){
$("div1").onmouseover=function(){
if ($("div2").style.width != "0px") return;
$("div2").style.display = "block";
expand($("div2"),"+",140,"block");
}
$("div1").onmouseout=function(e){//---------------
e=e||event;//---------------
var toObj=e.toElement||e.relatedTarget;//---------------
if(this.contains(toObj))return;//---------------
if ($("div2").style.width != "140px") return;
expand($("div2"),"-",0,"none");
}
}
function expand(o,fuhao,wh,dis){
eval("var th = parseInt(o.style.height)"+fuhao+"5");
eval("var tw = parseInt(o.style.width)"+fuhao+"5");
o.style.height = th+"px";
o.style.width = tw+"px";
stop = setTimeout(function(){ expand(o,fuhao,wh,dis) },10);
if (th == wh || tw == wh){
clearTimeout(stop);
o.style.display = dis;
}
}
function $(oid){
return document.getElementById(oid);
}
//-->
</script>
</head>
<body>
<div id="div1">
<div id="div2" style="width:0px;height:0px;display:none;"></div>
</div>
</body>
</html>不悲不喜 2008-11-19
- 打赏
- 举报
又改了一下.
不过频繁的移动还是有问题呀.
等脑袋清醒的时候再改改吧.
不过频繁的移动还是有问题呀.
等脑袋清醒的时候再改改吧.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
<!-- #div1 {
position: relative;
height: 25px;
width: 60px;
background-color: #FFD5AA;
} #div2 {
position: absolute;
top: 25px;
left: 0px;
background-color: #B5FFB5;
}
-->
</style>
<script type="text/javascript">
<!--
window.onload = function(){
$("div1").onmouseover = mouseOver;
function mouseOver(e){
e = e || window.event;
if ($("div2").style.width != "0px") {
clearTimeout(stop);
}
$("div2").style.display = "block";
expand($("div2"), "+", 140, "block");
}
$("div1").onmouseout = $("div2").onmouseout = function(e){
e = e || window.event;
var elFrom = e.fromElement || e.target;
var elTo = e.toElement || e.relatedTarget;
if ((elFrom.id=="div1" && elTo.id == "div2")
|| (elFrom.id=="div2" && elTo.id == "div1")) {
return;
}
expand($("div2"), "-", 0, "none");
}
}
function expand(o, fuhao, wh, dis){
if (parseInt(o.style.height) == wh || parseInt(o.style.height) == wh) {
clearTimeout(stop);
o.style.display = dis;
return;
}
eval("var th = parseInt(o.style.height)" + fuhao + "5");
eval("var tw = parseInt(o.style.height)" + fuhao + "5");
o.style.height = th + "px";
o.style.width = tw + "px";
stop = setTimeout(function(){
expand(o, fuhao, wh, dis)
}, 10);
}
function $(oid){
return document.getElementById(oid);
}
//-->
</script>
</head>
<body>
<div id="div1">
<div id="div2" style="width:0px;height:0px;display:none;">
</div>
</div>
</body>
</html>
cgisir 2008-11-19
- 打赏
- 举报
[Quote=引用 10 楼 syukugai 的回复:]
引用 9 楼 ganglong99 的回复:
......
楼上的可以！
将鼠标移动到div1中，
并在div2放大的过程中。
迅速将鼠标移出div1,
div2仍然被显示出来了。
......
[/Quote]
引用 9 楼 ganglong99 的回复:
......
楼上的可以！
将鼠标移动到div1中，
并在div2放大的过程中。
迅速将鼠标移出div1,
div2仍然被显示出来了。
......
[/Quote]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
<!--
#div1{position:relative;height:25px;width:60px;background-color:#FFD5AA;}
#div2{position:absolute;top:25px;left:0px;background-color:#B5FFB5;}
-->
</style>
<script type="text/javascript">
<!--
window.onload = function(){
var t, div1 = $('div1'), div2=$('div2'), maxw = 140;
div2.t = null;
div1.onmouseover = function(){
if(t) clearTimeout(t);
status = div2.t;
if(div2.offsetWidth >= maxw) return;
div2.style.display = 'block';
clearInterval(div2.t);
div2.t = setInterval(function(){ expand(div2, 1, maxw);}, 10);
}
div1.onmouseout = function(){
if(div2.offsetWidth < maxw){
clearInterval(div2.t);
div2.t = setInterval(function(){ expand(div2, 0)}, 10);
}else{
t = setTimeout(function(){
div2.t = setInterval(function(){ expand(div2, 0)}, 10);
}, 1);
}
}
}
function expand(obj, s, w){
if(s){
if(obj.offsetWidth>=w){
clearTimeout(obj.t);
}else{
obj.style.width = obj.offsetWidth + 5 +'px';
obj.style.height = obj.offsetHeight + 5 +'px';
}
}else{
if(obj.offsetWidth<=0){
clearInterval(obj.t);
obj.style.display = 'none';
}else{
obj.style.width = obj.offsetWidth - 5 +'px';
obj.style.height = obj.offsetHeight - 5 +'px';
}
}
}
function $(oid){
return document.getElementById(oid);
}
//-->
</script>
</head>
<body>
<div id="div1">
<div id="div2" style="width:0px;height:0px;display:none;"></div>
</div>
</body>
</html>不悲不喜 2008-11-19
- 打赏
- 举报
[Quote=引用 9 楼 ganglong99 的回复:]
......
楼上的可以！
[/Quote]
将鼠标移动到div1中，
并在div2放大的过程中。
迅速将鼠标移出div1,
div2仍然被显示出来了。
......
......
楼上的可以！
[/Quote]
将鼠标移动到div1中，
并在div2放大的过程中。
迅速将鼠标移出div1,
div2仍然被显示出来了。
......
dhq314 2008-11-18
- 打赏
- 举报
买有一本《jQuery基础教程》，不过看到一半觉得都是在调用jQuery API，没有JavaScript原汁原味的感觉就扔到一边去了~
onlythree 2008-11-18
- 打赏
- 举报
如果楼主不是在学习js，而仅仅是实现所需的效果，我建设你用jquery等一些类库，像楼主这种功能，这些类库会提供更优雅的解决方案。像类似if ($("div2").style.width != "0px") return;这样的实现方式有可能造成不同browse的兼容性问题
不悲不喜 2008-11-18
- 打赏
- 举报
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
<!-- #div1 {
position: relative;
height: 25px;
width: 60px;
background-color: #FFD5AA;
} #div2 {
position: absolute;
top: 25px;
left: 0px;
background-color: #B5FFB5;
}
-->
</style>
<script type="text/javascript">
<!--
window.onload = function(){
$("div1").onmouseover = function(e){
if ($("div2").style.width != "0px")
return;
$("div2").style.display = "block";
expand($("div2"), "+", 140, "block");
}
$("div1").onmouseout = $("div2").onmouseout = function(e){
e = e || window.event;
var elTo = e.toElement || e.relatedTarget;
if (elTo.id == "div1" || elTo.id == "div2") {
return;
}
if ($("div2").style.width != "140px")
return;
expand($("div2"), "-", 0, "none");
}
}
function expand(o, fuhao, wh, dis){
eval("var th = parseInt(o.style.height)" + fuhao + "5");
eval("var tw = parseInt(o.style.width)" + fuhao + "5");
o.style.height = th + "px";
o.style.width = tw + "px";
stop = setTimeout(function(){
expand(o, fuhao, wh, dis)
}, 10);
if (th == wh || tw == wh) {
clearTimeout(stop);
o.style.display = dis;
}
}
function $(oid){
return document.getElementById(oid);
}
//-->
</script>
</head>
<body>
<div id="div1">
<div id="div2" style="width:0px;height:0px;display:none;">
</div>
</div>
</body>
</html>
