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

ExtJS TabPanel beforeremove beforeclose使用说明

Mar 31 Javascript

JS的document.all函数使用示例

Dec 30 Javascript

jQuery中验证表单提交方式及序列化表单内容的实现

Jan 06 Javascript

node.js Web应用框架Express入门指南

May 28 Javascript

浅谈JavaScript中运算符的优先级

Jul 07 Javascript

angular.js之路由的选择方法

Sep 24 Javascript

一个简易的js图片轮播效果

Jul 22 Javascript

js禁止Backspace键使浏览器后退的实现方法

Sep 01 Javascript

详解Angular调试技巧之报错404(not found)

Jan 31 Javascript

JavaScript设计模式之责任链模式实例分析

Jan 16 Javascript

详解JSON.parse和JSON.stringify用法

Feb 18 Javascript

vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错解决

Apr 06 Vue.js

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