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()方法。这个方法主要是为了把需要的弹出框什么的都创建出来。
/**
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
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()方法。这个方法主要是为了把需要的弹出框什么的都创建出来。
javascript窗口淡入淡出效果和读取xml
javascript窗口淡入淡出效果和读取xml
ulead gif制作文字淡出淡入效果
图片淡出淡入
材质的淡入淡出
用PHP读取和编写XML DOM
javascript弹出窗口总结
窗口显示和关闭的时候出现动画效果
PHP 操作 XML 文件 - 读取、显示
在Java2平台企业版中应用异步JavaScript技术和XML(AJAX)
JR 精品文章 - 利用jdom实现读取数据库生成XML及读取XML文件插入数据库
JavaScript 拖放效果
JAVASCRIPT弹出,关闭窗口代码总结
JAVASCRIPT弹出,关闭窗口代码总结
JavaScript Remote Scripting: Processing XML Files
怎样制作淡出的图片效果
用PHP读取和编写XML DOM -- PHP China-中国PHP开源技术|新闻|软件|服务|培训|支持|产品|Zend官方论坛网站
JavaScript经典效果集锦 2
JavaScript经典效果集锦3
JavaScript经典效果集锦2
JavaScript经典效果集锦2
JavaScript经典效果集锦3
模态窗口和非模态窗口11
javascript页面刷新与弹出窗口问题解决方法