qq延遲提示框

效果如圖:利用gif生產(chǎn)的圖片 不是很明顯,可以直接粘貼代碼 運行一下


GIF02.gif

原生代碼:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>QQ延時提示框.html</title>
        <style>
            div{float: left; margin: 10px;} 
            #div1{width: 50px; height: 50px; background: red;}
            #div2{width: 250px; height: 180px; background: #CCCCCC;display: none;}
        </style>

    </head>
    <script>
        
        window.onload=function(){
            var odiv1=document.getElementById("div1");
            var odiv2=document.getElementById("div2");
            var timer=null;
            
            odiv1.onmouseover=function(){ 
                clearTimeout(timer);
                odiv2.style.display='block'; 
            }
            
            odiv1.onmouseout=function(){ 
              timer=setTimeout(function(){
                  odiv2.style.display='none';
               },500)
            }
            
            odiv2.onmouseover=function(){
                clearTimeout(timer);
            }
            
            odiv2.onmouseout=function(){
                timer=setTimeout(function(){
                    odiv2.style.display='none';
                },500)  
            }
        }   
      </script>  
    <body>
        <div id="div1"></div>
        <div id="div2"></div>
    </body>
</html>


簡化代碼:

    window.onload=function(){
            var odiv1=document.getElementById("div1");
            var odiv2=document.getElementById("div2");
            var timer=null;
            
            odiv1.onmouseover=odiv2.onmouseover=function(){ 
                clearTimeout(timer);
                odiv2.style.display='block'; 
            }
            
            odiv1.onmouseout=odiv2.onmouseout=function(){ 
              timer=setTimeout(function(){
                  odiv2.style.display='none';
               },500)
            }
            
        }

2利用JQ實現(xiàn)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>QQ延時提示框==jp.html</title>
        <style>
            #div1{width: 50px; height: 50px; background: red;position:  relative;}
            #div2{width: 250px; height: 180px; background: #CCCCCC; position: absolute; left: 60px; top: 0px; display: none; }
        </style>

    </head>
    <body>
        <div id="div1">
                <div id="div2"></div>
        </div>
        <script type="text/javascript" src="js/jquery-1.11.3.js" ></script>
        <script>
            $("#div1").on({
            
            click:function(){
                $("#div2").text("你點我做什么,我就是500毫秒延遲顯示");
            },
            mouseenter:function(){ 
                $("#div2").stop().fadeIn(500);
            },
            mouseleave:function(){
                $("#div2").stop().fadeOut(500,function(){
                    $("#div2").text(" ");
                });
                
            }
            
            })
            
        </script>
    </body>
</html>
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容