今天有个朋友让我帮他弄个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程序只能用FalseorderDoc.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>