zoukankan      html  css  js  c++  java
  • div Js隐藏显示

    <!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/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
    <style>

    div.poptip {
     position: absolute;
     border-bottom: 2px solid #CCC;
     border-right: 2px solid #CCC;
     padding: 0;
     text-align: left;
      300px;
     opacity: 0.9;
    }
    div.innertip {
     background: #D9EBC7;
     border: 1px solid #BBB;
     line-height: 1.8em;
    }
    .poptip > .innertip {
     margin-bottom: -1px;
    }

    div.poptip a {
     font-weight: normal;
     text-decoration: none;
    }
    div.poptip p.title {
     background: #D9EBC7;
     font-weight: bold;
     color: #666;
     padding: 0 0.5em;
     margin: 0;
    }
    .poptip .close {
     background:  #D9EBC7;
     float: right;
    }
    .poptip ul {
     margin: 0.5em 1em;
     padding: 0;
     list-style: none;
    }
    .poptip li {
     background:#D9EBC7;
     padding-left: 1;
     height: 1;
     overflow: hidden;
    }
    .poptip .readmore {
     margin: 0 0.5em;
     border-top: 1px solid #DAE1F1;
     text-align: right;
     background:#D9EBC7;
     padding-right: 1em;
    }
    .hnli{
    255px;
    }
    </style>
    </head>

    <body>
    <script language="javascript" type="text/javascript">
        function tagnone()
        {
         document.getElementById("tipdiv").style.display="none";
        }
        var offX = 2;
        var offY = 0;
        var width = 0;
        var height = 0;
        var scrollX = 0;
        var scrollY = 0; 
        var x = 0;
        var y = 0;
        function conentall(index)
        {
            var strAry=new Array();
            strAry[1]='<%=showStr01 %>';
            strAry[2]="2dddddddssssssssssssssd";
            var tip = parent.document.getElementById("tipDiv");
            tip.style.display="inline";
            tip.innerHTML = "<div class='poptip'><div class='innertip'><ul><li>"+strAry[index]+"</li><li><a onclick='tagnone()' class='close' title='关闭'>关闭</a></li></ul></div></div>";
           
            if (window.innerWidth) width = window.innerWidth - 18;
         else if (document.documentElement && document.documentElement.clientWidth)
          width = document.documentElement.clientWidth;
         else if (document.body && document.body.clientWidth)
          width = document.body.clientWidth;
        
         if (window.innerHeight) height = window.innerHeight - 18;
         else if (document.documentElement && document.documentElement.clientHeight)
          height = document.documentElement.clientHeight;
         else if (document.body && document.body.clientHeight)
          height = document.body.clientHeight;

         if (typeof window.pageXOffset == "number") scrollX = window.pageXOffset;
         else if (document.documentElement && document.documentElement.scrollLeft)
          scrollX = document.documentElement.scrollLeft;
         else if (document.body && document.body.scrollLeft)
          scrollX = document.body.scrollLeft;
         else if (window.scrollX) scrollX = window.scrollX;
          
         if (typeof window.pageYOffset == "number") scrollY = window.pageYOffset;
         else if (document.documentElement && document.documentElement.scrollTop)
          scrollY = document.documentElement.scrollTop;
         else if (document.body && document.body.scrollTop)
          scrollY = document.body.scrollTop;
         else if (window.scrollY) scrollY = window.scrollY;
        
         x=event.pageX?event.pageX:event.clientX+scrollX;
         y=event.pageY?event.pageY:event.clientY+scrollY;
        
            if(x+tip.offsetWidth+offX>width+scrollX){
      x=x-tip.offsetWidth-offX;
      if(x<0)x=0;
         }else x=x+offX;
         if(y+tip.offsetHeight+offY>height+scrollY){
          y=y-tip.offsetHeight-offY;
          if(y<scrollY)y=height+scrollY-tip.offsetHeight;
         }else y=y+offY;
         tip.style.left=x+"px";
         tip.style.top=y+"px";
         //tip.style.display = '';
        }
       
    </script>



    html部分
    <img src="file:///E|/工作项目/大东区绿化/相关文件/需求/大东区绿化/古树.jpg" width="1004" height="1489" border="0" usemap="#Map" />
    <map name="Map" id="Map">
    <area shape="rect" coords="40,74,299,199" href="#"  onmouseover="conentall('ssssssssss');" onmouseout="tagnone()" />
    </map>
     <!--弹出详细内容div-->
    <div id="tipDiv" style="BORDER-RIGHT:#333366 1px solid; BORDER-TOP:#333366 1px solid; DISPLAY:none; Z-INDEX:1; BORDER-LEFT:#333366 1px solid; BORDER-BOTTOM:#333366 1px solid; POSITION:absolute; BACKGROUND-COLOR:#ffffcc"></div>
    <!--弹出详细内容div-->

    </body>
    </html>

  • 相关阅读:
    Python从菜鸟到高手(18):类与方法的私有化
    小程序云开发实战
    第一行代码:以太坊(3)-使用更多的工具编写和测试智能合约
    第一行代码:以太坊(2)-使用Solidity语言开发和测试智能合约
    第一行代码:以太坊(1)-创建自己的私有区块链
    用量子物理学原理解释为什么振金可以吸收能量(论发散思维的重要性)
    Python网络爬虫实战:根据天猫胸罩销售数据分析中国女性胸部大小分布
    Python从菜鸟到高手(8):print函数、赋值与代码块
    基于ArcPy的ArcGIS python设计与开发实战--GIS二次开发
    tensorflow数据增强
  • 原文地址:https://www.cnblogs.com/skyblue/p/1107107.html
Copyright © 2011-2022 走看看