鼠标移到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代码
Mar 10 Javascript
js中的window.open返回object的错误的解决方法
Aug 15 Javascript
原生js实现shift/ctrl/alt按键的获取
Apr 08 Javascript
jquery 选取方法都有哪些
May 18 Javascript
javascript实现图片自动和可控的轮播切换特效
Apr 13 Javascript
jQuery+AJAX实现无刷新下拉加载更多
Jul 03 Javascript
jQuery手动点击实现图片轮播特效
Apr 20 Javascript
Angular中ng-repeat与ul li的多层嵌套重复问题
Jul 24 Javascript
jQuery 点击获取验证码按钮及倒计时功能
Sep 20 jQuery
JavaScript实现抖音罗盘时钟
Oct 11 Javascript
解决$store.getters调用不执行的问题
Nov 08 Javascript
javascript设计模式 ? 抽象工厂模式原理与应用实例分析
Apr 09 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效率,提高php性能的一些方法
2011/03/24 PHP
$_GET['goods_id']+0 的使用详解
2013/06/06 PHP
apache和PHP如何整合在一起
2015/10/12 PHP
php微信公众号开发之快递查询
2018/10/20 PHP
Js获取事件对象代码
2010/08/05 Javascript
JQuery中使文本框获得焦点的方法实例分析
2015/02/28 Javascript
JavaScript获取当前cpu使用率的方法
2015/12/15 Javascript
Bootstrap表单组件教程详解
2016/04/26 Javascript
浅析JavaScript中命名空间namespace模式
2016/06/22 Javascript
浅谈Vue.js中ref ($refs)用法举例总结
2017/12/19 Javascript
写一个移动端惯性滑动&amp;回弹Vue导航栏组件 ly-tab
2018/03/06 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(下)
2018/04/18 Javascript
js中getter和setter用法实例分析
2018/08/14 Javascript
IE8中jQuery.load()加载页面不显示的原因
2018/11/15 jQuery
零基础之Node.js搭建API服务器的详解
2019/03/08 Javascript
[00:32]2018DOTA2亚洲邀请赛EG出场
2018/04/03 DOTA
[48:30]LGD vs infamous Supermajor小组赛D组 BO3 第一场 6.3
2018/06/04 DOTA
寻找网站后台地址的python脚本
2014/09/01 Python
用不到50行的Python代码构建最小的区块链
2017/11/16 Python
python的exec、eval使用分析
2017/12/11 Python
Python通过matplotlib画双层饼图及环形图简单示例
2017/12/15 Python
Python实现的根据文件名查找数据文件功能示例
2018/05/02 Python
python dataframe向下向上填充,fillna和ffill的方法
2018/11/28 Python
python读取目录下最新的文件夹方法
2018/12/24 Python
python微信公众号开发简单流程实现
2020/03/09 Python
Python图片处理模块PIL操作方法(pillow)
2020/04/07 Python
利用Python批量识别电子账单数据的方法
2021/02/08 Python
Html5画布_动力节点Java学院整理
2017/07/13 HTML / CSS
html5图片上传预览示例分享
2014/04/14 HTML / CSS
整理HTML5中支持的URL编码与字符编码
2016/02/23 HTML / CSS
英国、欧洲和全球租车服务:Avis英国
2016/08/29 全球购物
Linux面试题LINUX系统类
2015/11/25 面试题
酒店应聘自荐信
2013/11/09 职场文书
村创先争优活动总结
2014/08/28 职场文书
南京市纪委监察局整改方案
2014/09/16 职场文书
JS数组的常用方法整理
2021/03/31 Javascript