zoukankan      html  css  js  c++  java
  • 自己写了一个弹出菜单,有间隙也可以

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>弹出菜单案例</title>
    <style>
    #cont { width:100px; height:30px; border:solid 1px #ccc; float:left;}
    #footer { width:200px;  height:100px; position:absolute; left:0px; top:50px; background-color:#f4f4f4; border:solid
     1px #ccc; left:10px;}
     #footer.disable { display:none;}
    #cont2 { width:100px; height:30px; border:solid 1px #ccc; float:left; margin-left:10px;}
    #footer2 { width:200px;  height:100px; position:absolute; left:120px; top:50px; background-color:#f4f4f4; border:solid
     1px #ccc;}
     #footer.disable , #footer2.disable{ display:none;}
    </style>
    </head>
    
    <body>
    <div id="cont">内容</div>
    <div id="footer" class="disable">此处显示  class "footer" 的内容</div>
    
    <div id="cont2">测试</div>
    <div id="footer2" class="disable">此处显示  class "footer" 的内容</div>
    <script>
    var cont = document.getElementById("cont");
    var foooter = document.getElementById("footer");
    var cont2 = document.getElementById("cont2");
    var foooter2 = document.getElementById("footer2");
    
    var obj = new tanchu(cont,foooter);
    var obj2 = new tanchu(cont2,foooter2);
    
    
    
    function tanchu (yuan,mubiao){
        var tiem ;
        var _this = this ;
        yuan.addEventListener("mouseover",function (){_this.show()});
        yuan.addEventListener("mouseout",function (){_this.hide()});
        mubiao.addEventListener("mouseover",function (){_this.show()});
        mubiao.addEventListener("mouseout",function (){_this.hide()});
            
        
        this.show = function (){
            clearTimeout(tiem);
            mubiao.className = "";
            
        }
        this.hide = function (){
            tiem = setTimeout(function (){mubiao.className = "disable";},200);
        }
        
    }
    
    
    </script>
    </body>
    </html>
  • 相关阅读:
    FastDFS学习总结(2)--Tracker与Storage配置详解
    FastDFS学习总结(1)--FastDFS安装和部署
    Git学习总结(6)——作为一名程序员这些代码托管工具你都知道吗?
    Git学习总结(6)——作为一名程序员这些代码托管工具你都知道吗?
    ActiveMQ学习总结(8)——消息队列设计精要
    ActiveMQ学习总结(8)——消息队列设计精要
    vnc
    Apache HTTP服务器 2.0版本文档
    SSH登录很慢
    source insight技巧
  • 原文地址:https://www.cnblogs.com/xiaotian747/p/3716150.html
Copyright © 2011-2022 走看看