鼠标移到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查找字符串中出现最多的字符和次数的小例子
Oct 29 Javascript
js清空form表单中的内容示例
May 20 Javascript
Javascript实现div的toggle效果实例分析
Jun 09 Javascript
JavaScript编程学习技巧汇总
Feb 21 Javascript
javascript 中null和undefined区分和比较
Apr 19 Javascript
jquery请求servlet实现ajax异步请求的示例
Jun 03 jQuery
JavaScript事件委托原理与用法实例分析
Jun 07 Javascript
JS实现前端页面的搜索功能
Jun 12 Javascript
深入理解Vue.js轻量高效的前端组件化方案
Dec 10 Javascript
10种JavaScript最常见的错误(小结)
Jun 21 Javascript
windows实现npm和cnpm安装步骤
Oct 24 Javascript
JS寄快递地址智能解析的实现代码
Jul 16 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
smarty模板引擎从配置文件中获取数据的方法
2015/01/22 PHP
PHP下SSL加密解密、验证、签名方法(很简单)
2020/06/28 PHP
功能强大的PHP POST提交数据类
2016/07/15 PHP
JS实现打开本地文件或文件夹
2021/03/09 Javascript
js 时间格式与时间戳的相互转换示例代码
2013/12/25 Javascript
jquery获取checkbox的值并post提交
2015/01/14 Javascript
JavaScript设计模式学习之“类式继承”
2015/03/12 Javascript
js实现简洁的滑动门菜单(选项卡)效果代码
2015/09/04 Javascript
jquery实现两边飘浮可关闭的对联广告
2015/11/27 Javascript
js滑动提示效果代码分享
2016/03/10 Javascript
vue2组件实现懒加载浅析
2017/03/29 Javascript
js绑定事件和解绑事件
2017/04/27 Javascript
react高阶组件经典应用之权限控制详解
2017/09/07 Javascript
vue+socket.io+express+mongodb 实现简易多房间在线群聊示例
2017/10/21 Javascript
Vue使用枚举类型实现HTML下拉框步骤详解
2018/02/05 Javascript
浅谈react受控组件与非受控组件(小结)
2018/02/09 Javascript
如何使node也支持从url加载一个module详解
2018/06/05 Javascript
使用Vuex解决Vue中的身份验证问题
2018/09/28 Javascript
Python的Django框架中的表单处理示例
2015/07/17 Python
Python脚本实现自动发带图的微博
2016/04/27 Python
Python生成随机数组的方法小结
2017/04/15 Python
python3设计模式之简单工厂模式
2017/10/17 Python
python进行文件对比的方法
2018/12/24 Python
Python logging设置和logger解析
2019/08/28 Python
python 创建一维的0向量实例
2019/12/02 Python
python中什么是面向对象
2020/06/11 Python
pycharm 代码自动补全的实现方法(图文)
2020/09/18 Python
css3设置box-pack和box-align让div里面的元素垂直居中
2014/09/01 HTML / CSS
css3 盒模型以及box-sizing属性全面了解
2016/09/20 HTML / CSS
家长评语和期望
2014/02/10 职场文书
2014年师德承诺书
2014/05/23 职场文书
大学生第一学年自我鉴定2015
2014/09/28 职场文书
党员评议表自我评价范文
2014/10/20 职场文书
导游词之西递宏村
2019/12/10 职场文书
利用Python判断整数是否是回文数的3种方法总结
2021/07/07 Python
使用Redis做预定库存缓存功能
2022/04/02 Redis