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>


文件下载
posted @ 2008-05-20 16:17  天纯蓝  阅读(926)  评论(0)  编辑  收藏  举报