javascript窗口淡入淡出效果和读取xml

来源:百度文库 编辑:神马文学网 时间:2024/03/28 23:34:14
        也是之前头儿让我在首页上做一个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="";
        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                    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+"
";
                text.innerHTML = strText;
            }
        };
        xmlhttp.open("GET","help.xml",false);
        xmlhttp.send(null);
    }    ------------------------------------------------------------------------------------------------------------------------------------------- 以上就是创建淡入淡出和读取xml并显出出来的代码。关键部分都写了注释只要有js基础的人都可以轻松阅读。因为淡入淡出大部分都是借鉴别人的。所以只有自己做修改的地方才会注释一下。有几个else的地方进行了注释。是自动淡出效果的判断。因为此处我希望通过点击自己定义的一个关闭按钮再关闭。所以才注释掉的。当点击关闭时候时候才执行淡出效果。读取xml的时候只要在页面调用方法的时候传入读取xml节点的节点名字。那么就可以通过传入不同参数显示不同节点的内容了。多处使用可以。所以在外部调用的时候这里我是分开写的。比如:点击弹出这样就可以了。在startObjMessage()方法里开始有个setDiv()方法。这个方法主要是为了把需要的弹出框什么的都创建出来。