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>
  • 相关阅读:
    字符转换(2,8,10,16进制,ASCII码)
    js正则表达式验证
    不能在DropDownList 中选择多个项
    SQL中sum(),avg()等统计结果为null的解决方法
    文本框TextBox只允许输入数字,不用onkeyup
    ORA01830: 日期格式图片在转换整个输入字符串之前结束
    Oracle数据库中的左连接与右连接
    asp.net服务器验证控件失效的问题
    在博客园开通博客的第一天
    米勒拉宾素数测试
  • 原文地址:https://www.cnblogs.com/xiaotian747/p/3716150.html
Copyright © 2011-2022 走看看