编程 Javascript

鼠标移到div,浮层显示明细,弹出层与div的上边距左边距重合(示例代码)

Posted in Javascript onDecember 14, 2013

如下所示：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        .toopTip
        {
            background-color:Yellow;
            border-style:solid;
            border-width:1px;
            border-color:Red;
        }
    </style>
   <script language="javascript" type="text/javascript">
       /*
            如果希望提示的div的左边界与上边界与显示的div重叠，那么需要删除文档头W3C标准
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
             "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">       */
       function initEvent() {
           var divArray = document.getElementsByTagName("div");
           for (var i = 0; i < divArray.length; i++) {
               divArray[i].onmouseover = createDivDetailOne;
               /*
                 无法用原始的div绑定鼠标移走的事件,因为明细的div的宽度长度都要大于原始div，
                 这样原始的div就被覆盖了，此时会自动触发onmouseout事件
               */
               //divArray[i].onmouseout = removeDivDetail;
           }
       }
       function createDivDetailOne() {
           //保证divDetail div的唯一性
           var divDetail = document.getElementById("divDetail");
           if(divDetail)
           {
               document.body.removeChild(divDetail);
           }
           divObj = document.createElement("div");
           divObj.className = "toopTip";
           divObj.setAttribute("id", "divDetail");
           divObj.style.position = "absolute";
           divObj.style.width = "200px";
           divObj.style.height = "100px";
           var triggerObj = window.event.srcElement;
           divObj.style.top = triggerObj.offsetTop;
           divObj.style.left = triggerObj.offsetLeft;
           divObj.innerHTML = triggerObj.innerText;
           document.body.appendChild(divObj);
           //此时用于明细的div已经覆盖了原div，所以覆盖的div要进行事件的处理
           document.getElementById("divDetail").onmouseout = function() {
               divObj = this;
               if (!divObj) {
                   return;
               }
               document.body.removeChild(divObj);
           };
       }
       function removeDivDetail() {
           var divObj = document.getElementById("divDetail");
           if (!divObj) {
               return;
           }
           document.body.removeChild(divObj);
       }


       window.onload = initEvent;
    </script>

</head>
<body>
    <div id="divOne" style="background-color: Fuchsia; width: 100px; height: 100px;" >
        Hello My Js World!
    </div>
    <div id="divTwo" style="background-color: Aqua; width: 100px; height: 100px">
        Welcome to My Js World!
    </div>
    <div id="divThree" style="background-color: Gray; width: 100px; height: 100px">
        THIS IS My Js World!
    </div>
</body>
</html>

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

javascript getElementsByClassName实现代码

Oct 11 Javascript

jQuery实现表头固定效果的实例代码

May 24 Javascript

javascript实现禁止复制网页内容

Dec 16 Javascript

Js实现无刷新删除内容

Apr 29 Javascript

Bootstrap媒体对象的实现

May 01 Javascript

node.js路径处理方法以及绝对路径详解

Mar 04 Javascript

Jquery删除css属性的简单方法

Dec 04 Javascript

详解node-ccap模块生成captcha验证码

Jul 01 Javascript

JavaScript实现的鼠标跟随特效示例【2则实例】

Dec 22 Javascript

浅谈js中的bind

Mar 18 Javascript

js实现文章目录索引导航(table of content)

May 10 Javascript

js仿京东放大镜效果

Aug 09 Javascript

js键盘上下左右键怎么触发function(实例讲解)

Dec 14 #Javascript

js 上下左右键控制焦点(示例代码)

Dec 14 #Javascript

利用JS来控制键盘的上下左右键(示例代码)

Dec 14 #Javascript

JS短路原理的应用示例精简代码的途径

Dec 13 #Javascript

代码触发js事件(click、change)示例应用

Dec 13 #Javascript

jquery获得option的值和对option进行操作

Dec 13 #Javascript

jquery遍历筛选数组的几种方法和遍历解析json对象

Dec 13 #Javascript