也是之前头儿让我在首页上做一个js淡入淡出效果的窗口。然后里边的内容直接都从xml里读取。其实读取xml倒是好办但是淡入淡出是真没做过。于是从网上搜索找了一个现成的稍加改造后就可以ie和firefox都可以正常正常使用了。
下面下把js部分的代码贴出来
-------------------------------------------------------------------------------------------------------------------------------------------
/** Firefox的写法与IE有很大的区别 最大的问题是当在读取XML节点或子节点的内容时,IE下一般使用selectNodes 、selectSingleNode 这些方法, 而Firefox并没有这些方法,所以不能使用。 因此以下的方法是为了兼容IE和firefox下读取xml文件节点的 */ var GetNodeValue = function(obj) { var str = ""; if(window.ActiveXObject) { //IE str = obj.text; } else { //Mozilla try { str = obj.childNodes[0].nodeValue; } catch(ex) { str = ""; } } return str; } if(document.implementation && document.implementation.createDocument) {
XMLDocument.prototype.loadXML = function(xmlString) { var childNodes = this.childNodes; for(var i = childNodes.length - 1; i >= 0; i--) this.removeChild(childNodes[i]); var dp = new DOMParser();
var newDOM = dp.parseFromString(xmlString, "text/xml"); var newElt = this.importNode(newDOM.documentElement, true); this.appendChild(newElt); }; // check for XPath implementation if(document.implementation.hasFeature("XPath", "3.0") ) { // prototying the XMLDocument XMLDocument.prototype.selectNodes = function(cXPathString, xNode) { if( !xNode ) { xNode = this; } var oNSResolver = this.createNSResolver(this.documentElement) var aItems = this.evaluate(cXPathString, xNode, oNSResolver,XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null) var aResult = []; for( var i = 0; i < aItems.snapshotLength; i++) { aResult[i] = aItems.snapshotItem(i); } return aResult; } // prototying the Element Element.prototype.selectNodes = function(cXPathString) { if(this.ownerDocument.selectNodes) { return this.ownerDocument.selectNodes(cXPathString, this); } else{throw "For XML Elements Only";} } } // check for XPath implementation if(document.implementation.hasFeature("XPath", "3.0") ) { // prototying the XMLDocument XMLDocument.prototype.selectSingleNode = function(cXPathString, xNode) { if( !xNode ) { xNode = this; } var xItems = this.selectNodes(cXPathString, xNode); if( xItems.length > 0 ) { return xItems[0]; } else { return null; } } // prototying the Element Element.prototype.selectSingleNode = function(cXPathString) { if(this.ownerDocument.selectSingleNode) { return this.ownerDocument.selectSingleNode(cXPathString, this); } else{throw "For XML Elements Only";} } } } //////////////////////////////////////////////////////////////////////////////////////// var intTimeStep=20; var isIe=(window.ActiveXObject)?true:false; var intAlphaStep=(isIe)?5:0.05; var curSObj = null; var curOpacity = null; var stopTime=0; //创建淡入淡出的窗口 function startObjMessage() { setdiv(); curSObj = document.getElementById("helpdiv"); if(isIe) { curSObj.style.display="none"; curSObj.style.filter="alpha(opacity=0)"; } setMessage(); } function setMessage() {
if(isIe) { curSObj.filters.alpha.opacity=0; } else { curOpacity=0; curSObj.style.opacity=0; } curSObj.style.display=‘‘; setMessageShow(); } function setMessageShow() {
if(isIe) { curSObj.filters.alpha.opacity+=intAlphaStep; if(curSObj.filters.alpha.opacity<100) { setTimeout(‘setMessageShow()‘,intTimeStep); } else { stopTime+=10; if(stopTime < 500) { setTimeout(‘setMessageShow()‘,intTimeStep); //} else { // stopTime=0; // setMessageClose(); } } } else { curOpacity+=intAlphaStep; curSObj.style.opacity =curOpacity; if(curOpacity<1) { setTimeout(‘setMessageShow()‘,intTimeStep); } else { stopTime+=10; if(stopTime<200) { setTimeout(‘setMessageShow()‘,intTimeStep); //} else { // stopTime=0; // setMessageClose(); } } } } function setMessageClose() {
if(isIe) { curSObj.filters.alpha.opacity-=intAlphaStep; if(curSObj.filters.alpha.opacity>0) { setTimeout(‘setMessageClose()‘,intTimeStep); } else { curSObj.style.display=‘none‘; } } else { curOpacity-=intAlphaStep; if(curOpacity>0) { curSObj.style.opacity =curOpacity; setTimeout(‘setMessageClose()‘,intTimeStep); } else { curSObj.style.display=‘none‘; } } } //创建帮助窗口 function setdiv() { var msgObj = document.createElement("div"); msgObj.setAttribute("id","helpdiv"); msgObj.setAttribute("align","left"); msgObj.style.background="white"; msgObj.style.border="1px solid #CCCCCC"; msgObj.style.position = "absolute"; msgObj.style.left = "50%"; msgObj.style.font="12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif"; msgObj.style.marginLeft = "-200px"; //窗口被卷去的高+(屏幕可用工作区高/2)-150 msgObj.style.top = document.body.scrollTop+(window.screen.availHeight/2)-190 +"px"; msgObj.style.width = "400px"; msgObj.style.height = "auto"; msgObj.style.minHeight = "200px"; msgObj.style.textAlign = "left"; msgObj.style.zIndex = "10001"; document.body.appendChild(msgObj); //提示信息标题 var title=document.createElement("h2"); title.setAttribute("id","helpheader"); title.setAttribute("align","right"); title.style.margin="0"; title.style.padding="0"; title.style.background="#f6faff"; title.style.height="26px"; title.style.lineHeight="26px"; title.style.font="12px Verdana, Geneva, Arial, Helvetica, sans-serif"; title.style.color="white"; title.innerHTML="<span style=\"font-size:14px;line-height:14px;padding:4px 4px 0 0;color:#000000;font-weight:bold;letter-spacing:2px;float:right\"><img src=\"images/close.gif\" onclick=\"javascript:setMessageClose();\" /></span>"; document.getElementById("helpdiv").appendChild(title); //创建显示帮助内容的div var textdiv = document.createElement("div"); textdiv.setAttribute("id","textdiv"); textdiv.style.padding="4px 10px"; document.getElementById("helpdiv").appendChild(textdiv); //帮助信息的title var Htitle = document.createElement("span"); Htitle.setAttribute("id","Htitle"); Htitle.style.float="left"; document.getElementById("textdiv").appendChild(Htitle); //帮助信息的内容 var Htext = document.createElement("span"); Htext.setAttribute("id","Htext"); Htext.style.float="left"; Htext.style.lineHeight="22px"; document.getElementById("textdiv").appendChild(Htext); } //根据传递进来的内容值去xml中获取相应的节点信息 function GetXmlData(helpindex) { var xmlhttp = ""; if(window.ActiveXObject) { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } else if(window.XMLHttpRequest) { xmlhttp = new XMLHttpRequest(); } xmlhttp.onreadystatechange = function updatePage() { if(xmlhttp.readyState == 4 && (xmlhttp.status == 200 || xmlhttp.status == 0)) { var xmlDOM = xmlhttp.responseXML; var root = xmlDOM.documentElement; var items = root.selectNodes("//HELP/"+helpindex); var strTitle = ""; var strText = ""; for(var i=0;i<items.length;i++) { strTitle = GetNodeValue(items[i].selectSingleNode("INFOTITLE")); strText = GetNodeValue(items[i].selectSingleNode("INFOTEXT")); } var title = document.getElementById("Htitle"); var text = document.getElementById("Htext"); title.innerHTML = strTitle+"<br/>"; text.innerHTML = strText; } }; xmlhttp.open("GET","help.xml",false); xmlhttp.send(null); } -------------------------------------------------------------------------------------------------------------------------------------------
以上就是创建淡入淡出和读取xml并显出出来的代码。关键部分都写了注释只要有js基础的人都可以轻松阅读。因为淡入淡出大部分都是借鉴别人的。所以只有自己做修改的地方才会注释一下。
有几个else的地方进行了注释。是自动淡出效果的判断。因为此处我希望通过点击自己定义的一个关闭按钮再关闭。所以才注释掉的。当点击关闭时候时候才执行淡出效果。读取xml的时候只要在页面调用方法的时候传入读取xml节点的节点名字。那么就可以通过传入不同参数显示不同节点的内容了。多处使用可以。
所以在外部调用的时候这里我是分开写的。比如:
<a href="javascript:void(0);" onclick="javascript:startObjMessage();GetXmlData(hINDEXHELP); ">点击弹出</a>
这样就可以了。
在startObjMessage()方法里开始有个setDiv()方法。这个方法主要是为了把需要的弹出框什么的都创建出来。
|
|
来自: 跃来跃去 > 《Javascript》