setTimeout应用例子-移入移出div显示和隐藏

Posted yswyzh

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了setTimeout应用例子-移入移出div显示和隐藏相关的知识,希望对你有一定的参考价值。

效果:移入div1,div2保持显示,移出div1,div2消失。

   移入div2,div2保持显示,移出div2,div2消失。

一、html代码

<div id=‘div1‘></div>
<div id=‘div2‘></div>

就g只有两个div模块,移入一个,显示另外一个。

二、CSS代码

给两个div抹上颜色,便于区别,在css里,我设置了float 属性,定义元素在左边方向浮动

 1 #div1{
 2     height:50px;
 3     background:grey;
 4     width:50px;
 5     float:left;border:1px
 6     }
 7 #div2{
 8     float:left;border:1px;    
 9     height:50px;
10     background:blue;
11     width:50px;
12     display:none;
13     
14     }

javascript代码

 1 <script>
 2 window.onload=function(){
 3     var oDiv1 = document.getElementById(‘div1‘);   
 4     var oDiv2 = document.getElementById(‘div2‘);    
 5     var timer =null;
 6     oDiv1.onmouseover=oDiv2.onmouseover =  function(){
 7         clearTimeout(timer);        //通过setTimeout返回值得值,清除setTimeout
 8         oDiv2.style.display=‘block‘;
 9         
10         
11         };
12     oDiv1.onmouseout = oDiv2.onmouseout =  function(){
13          timer =  setTimeout(function(){   //此处赋值给timer,因为setTimeout本身会返回一个值。这个值是系统记录的一个setTimeout的ID,以后可以通过这个ID取消定时器
14             
15             oDiv2.style.display=‘none‘;    //设置1000毫秒后,div2模块消失
16             },1000);
17         
18         }
19     
20     
21     
22     };
23 
24 
25 
26 </script>

四、效果演示

技术分享图片

 

以上是关于setTimeout应用例子-移入移出div显示和隐藏的主要内容,如果未能解决你的问题,请参考以下文章

javascript鼠标移入移出事件

鼠标悬浮事件

js怎么做鼠标移过去会显示隐藏的内容

js(jquery)鼠标移入移出事件时,出现闪烁隐藏显示隐藏显示不停切换的情况

JavaScript 入门练习2:鼠标移入移出改变 div 大小

vue中鼠标移入移出,怎么让其切换到里面的内容