鼠标移到div,浮层显示明细,弹出层与div的上边距左边距重合(示例代码)

如下所示：


代码如下:

<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>

赞 (0)

相关推荐

  • 鼠标移到div,浮层显示明细,弹出层与div的上边距左边距重合(示例代码)

    如下所示: 复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"><head>    <title></title>    <style type="text/css">        .toopTip        {            background-color:Yellow;            border-style:solid; 

  • js实现div弹出层的方法

    本文实例讲述了js实现div弹出层的方法.分享给大家供大家参考.具体分析如下: 话说现在各种插件出来了要实现弹出层真是太简单了,但个人有时觉得那些插件不实用经常会找一些纯js原生态的东西,下面来给各位分享一个原生太js div弹出层实例,有需要的朋友可一起看看. 这个不用多说了,直接贴代码吧.有码有注释: 复制代码 代码如下: /*  * 弹出DIV层 */ function showDiv() { var Idiv     = document.getElementById("Idiv&quo

  • js鼠标滑过弹出层的定位IE6bug解决办法

    大家在写div+css的时候经常会用到弹出层,由于IE6的bug,所以当使用多个标签重复写弹出层的时候会遇到后面的层压在了弹出层的上面,这种问题在火狐浏览器下可以用z-index来解决,但是在IE6下面是不起作用的,下面的代码给大家提供了一种此类问题的解决办法,原理如下:用Jquery给弹出层的z轴依次增加高度.代码很简单,效果很显著,吼吼! 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q

  • 使用js实现关闭js弹出层的窗口

    <script type="text/javascript">function toggle() {  theObj = document.getElementById('Sunyanzi').style;  if (  theObj.display == "none" ) theObj.display = "block"; else theObj.display = "none";}</script>

  • 原生js的弹出层且其内的窗口居中

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <HTML> <HEAD> <TITLE> New Document </TITLE> <meta charset="UTF-8

  • 使用JavaScript实现弹出层效果的简单实例

    使用JavaScript实现弹出层效果的简单实例

    声明 阅读本文需要有一定的HTML.CSS和JavaScript基础 设计 实现弹出层效果的思路非常简单:将待显示的内容先隐藏,在触发某种条件后(如点击按钮),将原本隐藏的内容显示出来. 实现 <!DOCTYPE html> <html> <head> <title>Window对象</title> <meta charset="utf-8"> </head> <body> <a hr

  • jquery实现点击弹出层效果的简单实例

    jquery实现点击弹出层效果的简单实例

    弹出层在实际应用中我们经常会碰到大量的弹出层效果,下面我来做一个基于jquery的简单的弹出层效果实例,各位朋友有兴趣可参考. 效果代码如下: 在 弹出层 中下面是核心代码 复制代码 代码如下: <script type="text/javascript">// 渐变弹出层$(document).ready(function(){ var speed = 600;//动画速度 $("#race a").click(function(event){//绑定

  • jQuery实现渐变弹出层和弹出菜单的方法

    本文实例讲述了jQuery实现渐变弹出层和弹出菜单的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xh

  • jQuery Mobile弹出窗、弹出层知识汇总

    先创建一个窗体 <div data-role="popup" id="popupView" class="ui-content" data-overlay-theme="b" data-position-to="window" data-dismissible="false"> <a href='javascript:void(0)' data-rel="ba

  • JS实现仿微博可关闭弹出层效果

    JS实现仿微博可关闭弹出层效果

    本文实例讲述了JS实现仿微博可关闭弹出层效果.分享给大家供大家参考.具体如下: 这里推荐给大家一款真心不错的JavaScript网页弹出层,仿微博JS弹出层可关闭,点击按钮才弹出来,可制作成网页客服之类的,比如在网页的右侧显示这么一个按钮,当点击的时候,展开层,显示客服QQ,效果还是很不错的! 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-f-weibo-close-able-alert-codes/ 具体代码如下: <!DOCTYPE

随机推荐