鼠标移到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 相关文章推荐
会自动逐行上升的文本框
Jun 30 Javascript
Javascript 实现TreeView CheckBox全选效果
Jan 11 Javascript
js捕获鼠标右键菜单中的粘帖事件实现代码
Apr 01 Javascript
node.js正则表达式获取网页中所有链接的代码实例
Jun 03 Javascript
基于jQuery全屏焦点图左右切换插件responsiveslides
Sep 07 Javascript
全面解析Bootstrap中scrollspy(滚动监听)的使用方法
Jun 06 Javascript
Vue.js计算属性computed与watch(5)
Dec 09 Javascript
JS和jQuery通过this获取html标签中的属性值(实例代码)
Sep 11 jQuery
Angular4集成ng2-file-upload的上传组件
Mar 14 Javascript
vue父组件异步获取数据传给子组件的方法
Jul 26 Javascript
Vue官方推荐AJAX组件axios.js使用方法详解与API
Oct 09 Javascript
原生JS实现随机点名项目的实例代码
Apr 30 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中在数据库中保存Checkbox数据(2)
2006/10/09 PHP
PHP文件去掉PHP注释空格的函数分析(PHP代码压缩)
2013/07/02 PHP
Linux系统下PHP-FPM的安装和配置教程
2015/08/17 PHP
php实现三级级联下拉框
2016/04/17 PHP
jQuery实现按钮的点击 全选/反选 单选框/复选框 文本框 表单验证
2015/06/25 Javascript
javascript带回调函数的异步脚本载入方法实例分析
2015/07/02 Javascript
json格式的javascript对象用法分析
2016/07/04 Javascript
微信小程序 slider 详解及实例代码
2017/01/10 Javascript
JS实现浏览器打印、打印预览示例
2017/02/28 Javascript
Bootstrap 3浏览器兼容性问题及解决方案
2017/04/11 Javascript
通过命令行创建vue项目的方法
2017/07/20 Javascript
JS实现的抛物线运动效果示例
2018/01/30 Javascript
Vue实现带进度条的文件拖动上传功能
2018/02/23 Javascript
详解Vue.js和layui日期控件冲突问题解决办法
2019/07/25 Javascript
ES6对象操作实例详解
2020/05/23 Javascript
Vue-cli 移动端布局和动画使用详解
2020/08/10 Javascript
vue+swiper实现左右滑动的测试题功能
2020/10/30 Javascript
Python3 Random模块代码详解
2017/12/04 Python
python将txt文件读取为字典的示例
2018/12/22 Python
在python plt图表中文字大小调节的方法
2019/07/08 Python
使用python切片实现二维数组复制示例
2019/11/26 Python
python实现打砖块游戏
2020/02/25 Python
python tkinter 设置窗口大小不可缩放实例
2020/03/04 Python
基于Python爬虫采集天气网实时信息
2020/06/05 Python
Keras实现DenseNet结构操作
2020/07/06 Python
html5 postMessage解决跨域、跨窗口消息传递方案
2016/12/20 HTML / CSS
欧洲最大的化妆品连锁公司:Douglas道格拉斯
2017/05/06 全球购物
英国男女豪华配饰和礼品网站:Black.co.uk
2020/02/28 全球购物
什么是数据抽象
2016/11/26 面试题
支部书记四风问题对照检查材料
2014/10/04 职场文书
交通局领导班子群众路线教育实践活动对照检查材料思想汇报
2014/10/09 职场文书
2014年小学班主任工作总结
2014/11/08 职场文书
项目经理岗位职责范本
2015/04/01 职场文书
辩论赛主持人开场白
2015/05/29 职场文书
门卫管理制度范本
2015/08/05 职场文书
Java多线程并发FutureTask使用详解
2022/06/28 Java/Android