鼠标移到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
You might like
在WordPress的后台中添加顶级菜单和子菜单的函数详解
2016/01/11 PHP
kindeditor 加入七牛云上传的实例讲解
2017/11/12 PHP
Yii2框架控制器、路由、Url生成操作示例
2019/05/27 PHP
滚动经典最新话题[prototype框架]下编写
2006/10/03 Javascript
JS 分号引起的一段调试问题
2009/06/18 Javascript
为你的网站增加亮点的9款jQuery插件推荐
2011/05/03 Javascript
实例说明为什么不要行内使用javascript
2014/04/18 Javascript
理解 JavaScript Scoping &amp; Hoisting(二)
2015/11/18 Javascript
JavaScript驾驭网页-获取网页元素
2016/03/24 Javascript
BootStrap智能表单实战系列(七)验证的支持
2016/06/13 Javascript
JavaScript对象数组如何按指定属性和排序方向进行排序
2016/06/15 Javascript
微信小程序 欢迎界面开发的实例详解
2016/11/30 Javascript
详解springmvc 接收json对象的两种方式
2016/12/06 Javascript
Angularjs中的ui-bootstrap的使用教程
2017/02/19 Javascript
Vue插件写、用详解(附demo)
2017/03/20 Javascript
JavaScript简介_动力节点Java学院整理
2017/06/26 Javascript
微信小程序实现日历功能
2018/11/27 Javascript
JavaScript实现浏览器网页自动滚动并点击的示例代码
2020/12/05 Javascript
Python 模板引擎的注入问题分析
2017/01/01 Python
python数字图像处理实现直方图与均衡化
2018/05/04 Python
Python基于递归和非递归算法求两个数最大公约数、最小公倍数示例
2018/05/21 Python
Python Selenium 之数据驱动测试的实现
2019/08/01 Python
python代码实现逻辑回归logistic原理
2019/08/07 Python
python3 selenium自动化 下拉框定位的例子
2019/08/23 Python
Python如何实现线程间通信
2020/07/30 Python
html5清空画布方法(三种)
2017/10/16 HTML / CSS
Java如何格式化日期
2012/08/07 面试题
Servlet如何得到服务器的信息
2015/12/22 面试题
电脑专业个人求职信范文
2014/02/04 职场文书
公司委托书怎么写
2014/08/02 职场文书
新兵入伍心得体会
2014/09/04 职场文书
学校运动会广播稿范文
2014/10/02 职场文书
领导视察通讯稿
2015/07/18 职场文书
聘任书范文大全
2015/09/21 职场文书
领导莅临指导欢迎词
2015/09/30 职场文书
golang 实现Location跳转方式
2021/05/02 Golang