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>
  • 相关阅读:
    软件开发基本原则(四)—— 风险管理 (转)
    软件开发基本原则(三)—— 基本原则 (转)
    人心散了,项目必然要败! (转)
    项目失败的若干征兆
    项目管理思考——角色转变
    软件开发基本原则(二)—— 典型错误 (转)
    项目管理思考——我适合做项目经理吗
    flex 学习篇 导航类容器
    mfc 中在 dc中 显示 位图
    第一次作业 黎娜 2013551605
  • 原文地址:https://www.cnblogs.com/tis100204/p/10310007.html
Copyright © 2011-2022 走看看