首页 > Web开发 > 详细

js 用延时函数来实现像鼠标移入qq头像然后会出现新的模块

时间:2016-09-05 20:47:10      阅读:256      评论:0      收藏:0      [点我收藏+]

技术分享

就好像这功能。

 

代码如下

<style>
    #div1{
        width:50px;
        height:50px;
        background:red; 
        margin-bottom:10px;
    }
    #div2{
        width:200px;
        height:200px;
        background:black;
        display:none;
    }
</style>


<body>
<div id="div1"></div>
<div id="div2"></div>
    
</body>
<script>
    window.onload=function()
    {
        var div1=document.getElementById("div1");
        var div2=document.getElementById(‘div2‘);
        var timer=null;
        div1.onmouseover= function()
        {
             div2.style.display=‘block‘;
        };

       
                div1.onmouseout= function()
                    {
                        clearTimeout(timer);
                       timer= setTimeout(function()
                        {
                             div2.style.display=‘none‘;
                        }, 500)
                    };
            div2.onmouseover=function()
            {
                clearTimeout(timer);
            };
            div2.onmouseout=function(){
                 timer=setTimeout(function(){div2.style.display=‘none‘;},500);            
            }
           
            
                    
    }
</script>

为什么要用延时器,

因为当移动另外一个模块时需要一定的时间,延时,鼠标能有一定的时间移到新的模块。

 

js 用延时函数来实现像鼠标移入qq头像然后会出现新的模块

原文:http://www.cnblogs.com/biyongyao/p/5843326.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!