zoukankan      html  css  js  c++  java

  • js调用xml数据显示div层上下滚动的公告

    js调用xml数据显示div层上下滚动的公告
    今天有个朋友让我帮他弄个js调xml的多公告,弄了一个多小时.
    代码如下

     

    <html>
    <head>


    <script language="JavaScript">
    <!--
    var i = -1;
    var orderDoc = new ActiveXObject("MSXML2.DOMDocument.3.0");
        orderDoc.async    =false;
            //async属性可规定XML文件的下载是否应当被同步处理。
        //True意味着load()方法可在下载完成之前向调用程序返回控制权。
        //False意味着在调用程序取回控制权之前下载必须被完成。
        //asp程序只能用False
    orderDoc.load("GGContent.xml");
    var items = orderDoc.selectNodes("/GongGao/Item");

    function getNode(doc, xpath) {
    varretval     = "";
    var value = doc.selectSingleNode(xpath);
    if (value) retval = value.text;
    return retval;
    }

    function GetContent(id)
    {
      id    =id-1;
          var str=getNode(orderDoc, "/GongGao/Item[" + id + "]/Content");
          return str
    }
    function GetUrl(id)
    {
     id    =id-1;
          var str=getNode(orderDoc, "/GongGao/Item[" + id + "]/Url");
          return str
    }
    function GetAddTime(id)
    {
     id    =id-1;
          var str=getNode(orderDoc, "/GongGao/Item[" + id + "]/AddTime");
          return str
    }

    // -->
    </script>

         <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 strContent=GetContent(index);//取xml节点内容
            var tip = parent.document.getElementById("tipDiv");
            tip.style.display    ="inline";
            tip.innerHTML     = "<div class='poptip'><div class='innertip'><a href=# onclick=tagnone() class=close title=关闭>关闭</a><br/><div class=gongao><marquee scrollAmount=2 width=300 height=160 direction=up>"+strContent+"</marquee></div></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>

            <style type="text/css">
    <!--
    .username     {background:#FBFBFB  no-repeat; BORDER-RIGHT: #949494 1px solid; BORDER-TOP: #949494 1px solid; FONT-SIZE: 12px; BORDER-LEFT: #949494 1px solid; COLOR: #949494; BORDER-BOTTOM: #949494 1px solid; HEIGHT: 18px }
    .STYLE12     {font-size: 12px}

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

    div.gongao     {
     background    : #EEEEEE;
     border    : 0px;
     padding    : 8;
    }

    .poptip > .innertip     {
     margin-bottom    : -1px;
    }

    div.poptip a     {
     font-weight    : normal;
     text-decoration    : none;
    }
    div.poptip p.title     {
     background    : #EEEEEE;
     font-weight    : bold;
     color    : #666;
     padding    : 0 0.5em;
     margin    : 0;
    }
    .poptip .close     {
     background    :  #EEEEEE;
     float    : right;
    }
     
    -->
    </style>
    </head>
    <body>

    <h2>XML 公告应用</h2>
    <div>
    <ul>
    <li>
    <!--调用方法conentall(1)-->
    <a href="#" onmouseover="conentall(1)">公告一</a></li>
    <li>公告二</li>
    <li>公告三 </li>
    <li>公告四</li>
    </ul>
    </div>
               <!--弹出详细内容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>


    文件下载
  • 相关阅读:
    导论
    Array
    Singleton
    Bridge
    Mediator
    interpreter
    Visitor
    Flyweight
    Command
    Chain Of Responsibility
  • 原文地址：https://www.cnblogs.com/skyblue/p/1203444.html
Copyright © 2011-2022 走看看