鼠标移到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 相关文章推荐
用js自动判断浏览器分辨率的代码
Jan 28 Javascript
javascript中的void运算符语法及使用介绍
Mar 10 Javascript
原生JavaScript实现连连看游戏(附源码)
Nov 05 Javascript
js实现字符串的16进制编码不加密
Apr 25 Javascript
AngularJs Javascript MVC 框架
Jun 20 Javascript
node.js缺少mysql模块运行报错的解决方法
Nov 13 Javascript
Angular4绑定html内容出现警告的处理方法
Nov 03 Javascript
JavaScript生成简单等差数列
Nov 28 Javascript
对vue.js中this.$emit的深入理解
Feb 23 Javascript
浅谈Angular HttpClient简单入门
May 04 Javascript
详解小程序缓存插件(mrc)
Aug 17 Javascript
原生js实现随机点名功能
Nov 05 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
You might like
刚才在简化php的库,结果发现很多东西
2006/12/31 PHP
php设计模式 Strategy(策略模式)
2011/06/26 PHP
单台服务器的PHP进程之间实现共享内存的方法
2014/06/13 PHP
php中实现xml与mysql数据相互转换的方法
2014/12/25 PHP
php浏览历史记录的方法
2015/03/10 PHP
PHP基于openssl实现的非对称加密操作示例
2019/01/11 PHP
JS学习之一个简易的日历控件
2010/03/24 Javascript
让JavaScript拥有类似Lambda表达式编程能力的方法
2010/09/12 Javascript
JavaScript面向对象程序设计三 原型模式(上)
2011/12/21 Javascript
改变隐藏的input中value的值代码
2013/12/30 Javascript
JQuery 传送中文乱码问题的简单解决办法
2016/05/24 Javascript
jQuery密码强度验证控件使用详解
2017/01/05 Javascript
详解vue嵌套路由-query传递参数
2017/05/23 Javascript
Vue组件中的data必须是一个function的原因浅析
2018/09/03 Javascript
基于ts的动态接口数据配置的详解
2019/12/18 Javascript
JS实现transform实现扇子效果
2020/01/17 Javascript
使用 Vue-TCB 快速在 Vue 应用中接入云开发的方法
2020/02/10 Javascript
vant 中van-list的用法说明
2020/11/11 Javascript
[02:25]DOTA2英雄基础教程 熊战士
2014/01/03 DOTA
[01:02:25]2014 DOTA2华西杯精英邀请赛5 24 NewBee VS VG
2014/05/25 DOTA
基python实现多线程网页爬虫
2015/09/06 Python
详解Python 数据库 (sqlite3)应用
2016/12/07 Python
基于Django的python验证码(实例讲解)
2017/10/23 Python
Python中的二维数组实例(list与numpy.array)
2018/04/13 Python
Python 创建空的list,以及append用法讲解
2018/05/04 Python
python爬取微信公众号文章
2018/08/31 Python
python实现修改固定模式的字符串内容操作示例
2019/12/30 Python
Python使用enumerate获取迭代元素下标
2020/02/03 Python
基于python实现上传文件到OSS代码实例
2020/05/09 Python
Python同时迭代多个序列的方法
2020/07/28 Python
css3的transition属性详解
2014/12/15 HTML / CSS
html5使用Canvas绘图的使用方法
2017/11/21 HTML / CSS
我看到了用指针调用函数的不同语法形式
2014/07/16 面试题
学生会主席演讲稿
2014/04/25 职场文书
地陪导游欢迎词
2015/01/26 职场文书
企业党建工作总结2015
2015/05/26 职场文书