您的位置：首页 > Web前端 > JavaScript

2016年5月25日下午（妙味课堂js预热课程-4笔记一）

2016-05-25 15:56 337 查看

一、延时显示框

　　首先我们要做的是制作两个显示框，当鼠标移入显示框1的时候显示框2出来，当鼠标移出的时候显示框2消失；其代码如下：

<script type="text/javascript">
window.onload=function () {
var oDiv1=document.getElementById("div1");
var oDiv2=document.getElementById("div2");

oDiv1.onmouseover=function () {
oDiv2.style.display="block";
};
oDiv1.onmouseout=function () {
oDiv2.style.display="none";
}
}
</script>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>


　　然后我们要做的就是我们发现当鼠标要移出显示框1的时候是始终不能移入显示框2，现在我们就要加入一个延时型的定时器了，setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。setTimeout(code,millisec)；

　　代码如下：

<script type="text/javascript">
window.onload=function () {
var oDiv1=document.getElementById("div1");
var oDiv2=document.getElementById("div2");

oDiv1.onmouseover=function () {
oDiv2.style.display="block";
};
oDiv1.onmouseout=function () {
setTimeout(function () {
oDiv2.style.display="none";
}, 300);
}
}
</script>


　　但是这时候我们发现显示框2还是在定时以后会消失，那现在我们要做的就是给显示框2也加入一个鼠标移入：即效果为鼠标可以移入显示框2，且鼠标移出时显示框2消失：代码如下：

<script type="text/javascript">
window.onload=function () {
var oDiv1=document.getElementById("div1");
var oDiv2=document.getElementById("div2");
var timer=null;

oDiv1.onmouseover=function () {
oDiv2.style.display="block";
};
oDiv1.onmouseout=function () {
timer=setTimeout(function () {
oDiv2.style.display="none";
}, 300);
};
oDiv2.onmouseover=function () {
clearTimeout(timer);
};
oDiv2.onmouseout=function () {
oDiv2.style.display="none";
}
}
</script>


　　这里要注意两个地方：即

　　　　1、给div2也加一个鼠标移入，即当div2鼠标移入地时候，我们要把定时器给清除掉，这样就不会造成鼠标移入地时候造成div2还是消失的这么一个情况，即把定时器给存起来；

　　　　同时在鼠标移入div2的时候我们把定时器给清了；即 oDiv2.onmouseover=function () {clearTimeout(timer);}；

　　　　　2、当鼠标从div2移出的时候，显示框2消失；

　　这里还有一个问题是当鼠标从显示框2移入到显示框1时它会闪烁一下，因为当我们鼠标离开时显示框2会消失，而当移入显示框1时显示框2才出来，所以中间还是会闪烁一下；这里我们的解决办法是一样的，即给显示框2 加一个延时型的定时器；代码如下所示：

<script type="text/javascript">
window.onload=function () {
var oDiv1=document.getElementById("div1");
var oDiv2=document.getElementById("div2");
var timer=null;

oDiv1.onmouseover=function () {
oDiv2.style.display="block";
};
oDiv1.onmouseout=function () {
timer=setTimeout(function () {
oDiv2.style.display="none";
}, 300);
};
oDiv2.onmouseover=function () {
clearTimeout(timer);
};
oDiv2.onmouseout=function () {
setTimeout(function () {
oDiv2.style.display="none";
},300);
}
}
</script>


　　说到这里我们又会注意到当鼠标移入显示框1的时候，显示框2 还是会消失，因为显示框2的定时器还在，这个时候我们就可以一样的把显示框2的定时器给存起来，同时在div1的显示框1上面加一个清除定时器；这样我们就可以在显示框1与显示框2之间自由的移动，直到鼠标移出这两个显示框时才消失；代码如下：

<script type="text/javascript">
window.onload=function () {
var oDiv1=document.getElementById("div1");
var oDiv2=document.getElementById("div2");
var timer=null;

oDiv1.onmouseover=function () {
oDiv2.style.display="block";
clearTimeout(timer);
};
oDiv1.onmouseout=function () {
timer=setTimeout(function () {
oDiv2.style.display="none";
}, 300);
};
oDiv2.onmouseover=function () {
clearTimeout(timer);
};
oDiv2.onmouseout=function () {
timer=setTimeout(function () {
oDiv2.style.display="none";
},300);
}
}
</script>　


　　clearTimeout() 方法可取消由 setTimeout() 方法设置的 timeout。

　　　　clearTimeout(id_of_settimeout)

简化代码：代码得到很大的简化；

<script type="text/javascript">
window.onload=function () {
var oDiv1=document.getElementById("div1");
var oDiv2=document.getElementById("div2");
var timer=null;

function show() {
oDiv2.style.display="block";
clearTimeout(timer);
}
function hide() {
timer=setTimeout(function () {
oDiv2.style.display="none";
}, 300);
}

oDiv1.onmouseover=show;
oDiv2.onmouseover=show;
oDiv1.onmouseout=hide;
oDiv2.onmouseout=hide;
}
</script>


　　总结延时提示框：

　　　　1、原来的方法：移入显示，移出隐藏；

　　　　2、移出延时隐藏：移出下面的div后，还是隐藏了，就需要清除延时型的定时器；

　　　　3、简化代码：合并两个相同的mouseover和mouseout；

再进行简化：（连续赋值）

<script type="text/javascript">
window.onload=function () {
var oDiv1=document.getElementById("div1");
var oDiv2=document.getElementById("div2");
var timer=null;

oDiv1.onmouseover=oDiv2.onmouseover=function() {
oDiv2.style.display="block";
clearTimeout(timer);
};
oDiv1.onmouseout=oDiv2.onmouseout=function() {
timer=setTimeout(function () {
oDiv2.style.display="none";
}, 300);
};
}
</script>


　　写了这么多，笨的人只能用笨的方法，总结一下就是做一个延时显示框，要用js对其实现。鼠标移入移出事件，以及延时型的定时器，并且要知道如何清除定时器。

　　
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航