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


    就好像这功能。

    代码如下

    <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中数组的sort()排序
    清除浮动方法
    浏览器兼容问题
    前端切图
    设置页面默认为繁体字
    7月计划
    css的层叠和继承
    Flex 布局教程:语法篇
    轮播图淡入淡出的js和jquery的效果
    接口调用async/await
  • 原文地址:https://www.cnblogs.com/biyongyao/p/5843326.html
Copyright © 2020-2023  润新知