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 type="text/css">
    body{font:12px; padding:0; margin:0;}
    #bigdiv{1000px; margin:0 auto;}

    .smalldiv{auto; height:100px; background:#066;}
    .infoa{color:#fff;}
    .infodiv{color:#fff; 200px; position:absolute; height:150px; background:gray; display:none;}

    </style>


    </head>

    <body>
        <div id="bigdiv">
            <div class="smalldiv">
                <a href="#" class="infoa">个人信息AAA</a>
            </div>
            <div class="smalldiv">
                <a href="#" class="infoa">个人信息BBB</a>
            </div>
            <div class="smalldiv">
                <a href="#" class="infoa">个人信息CCC</a>
            </div>
            <div class="smalldiv">
                <a href="#" class="infoa">个人信息DDD</a>
            </div>
            <div class="infodiv" id="infoDiv">弹出框</div>
        </div>
    </body>
    </html>
    <script>
        var oInfoDiv = document.getElementById("infoDiv");
        var oInfoa = document.getElementsByClassName("infoa");
        for( var i = 0 ; i < oInfoa.length ; i++ ){
            oInfoa[i].onclick = function(e){
                var e = e || event;
                e.stopPropagation ? e.stopPropagation() : e.cancelBuble = true;
                oInfoDiv.style.display = "block";
                oInfoDiv.style.left = e.pageX +"px";
                oInfoDiv.style.top = e.pageY +"px";
            }   
        }
        document.onclick = function(){
            oInfoDiv.style.display = "none";    
        }

    </script>
  • 相关阅读:
    servlet遇到的问题
    servlel出现404问题★ 出现不自动映射 设置XML的问题时候
    c3p0的错误mchange.v2.ser.Indirector
    【转】JSON和JSONP
    性能测试理论
    如何解决包冲突问题
    一方包、二方包、三方包是什么?
    利用selenium webdriver点击alert提示框
    采用Spring管理Bean和依赖注入
    Java加载jar文件并调用jar文件当中有参数和返回值的方法
  • 原文地址:https://www.cnblogs.com/tis100204/p/10310007.html
Copyright © 2011-2022 走看看