编程 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 相关文章推荐

如何实现浏览器上的右键菜单

Jul 10 Javascript

JQuery对checkbox操作（循环获取）

May 20 Javascript

JavaScript面向对象设计二构造函数模式

Dec 20 Javascript

JavaScript判断textarea值是否为空并给出相应提示

Sep 04 Javascript

浅谈js中的延迟执行和定时执行

May 31 Javascript

AngularJS 依赖注入详解和简单实例

Jul 28 Javascript

json定义及jquery操作json的方法

Sep 29 Javascript

AngularJs1.x自定义指令独立作用域的函数传入参数方法

Oct 09 Javascript

jQuery实现的老虎机跑动效果示例

Dec 29 jQuery

Element-ui自定义table表头、修改列标题样式、添加tooltip、:render-header使用

Apr 11 Javascript

vue实现手机号码的校验实例代码（防抖函数的应用场景）

Sep 05 Javascript

JS使用for in有序获取对象数据

May 19 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