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>

  • 相关阅读:
    n皇后问题
    POJ2155 Matrix二维线段树经典题
    hiho一下 第六十六周
    hdu1754 I hate it线段树模板 区间最值查询
    hdu5481 Desiderium
    自增运算符
    hdu-1823 Luck and Love
    Oracle 函数大全
    对前台传过来的实体是否为空 进行为空校验的N种方法
    IOC和DI的区别详解
  • 原文地址:https://www.cnblogs.com/skyblue/p/1107107.html
Copyright © 2011-2022 走看看