来源:飞翔下载(www.52z.com)
系列 3-a 为渐显、渐隐切换展示,注意必须事先用样式表设置 #msgContent 的宽度、高度和透明度。
系列 3-b 与系列 3-a 功能相同,只是数据来源不同,3-a 的数据直接写在 JavaScript 变量中,3-b 的数据写在 HTML 元素中,通过 innerHTML 获得。
更多资料,请参见 Exhibition系列3-a
示例:
<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>Exhibition系列3-a</title><style type="text/css">#msg{ width:300px; height:100px; border:1px solid #666666;}#msgContent{ width:100%; height:100%; filter:alpha(opacity=0);/*这句在IE里面使切换产生效果*/}</style></head><body><div><a href="http://www.52z.com/" target="_blank">飞翔下载 www.52z.com 专业探讨【ASP、JavaScript、XHTML+CSS、SQL Server】</a><hr></div><div id="msg"> <div id="msgContent"></div></div><script language="javascript"><!--//飞翔下载 www.52z.comvar msgArr = new Array("夜慢慢黑去,我开始淡去","天开始亮了,而我又是谁","又有谁知道大海深处是我的泪","又有谁知道威山脚下有我的脆弱");var msgIndex = -1; //消息下标,这里是最小有效值-1var msgMaxIndex = msgArr.length-1; //消息下标最大值//获得当前要显示的消息//被 ShowMsg 调用//可根据实际情况作修改function GetMsgData(){ msgIndex = ((++msgIndex)<=msgMaxIndex)?msgIndex:0; return msgArr[msgIndex];}//targetStr 显示消失的 HTML 标签的 id 值,字符串类型//fadeinStep 渐显速度//fadeoutStep 渐隐速度//fadeinDelay 渐显延迟,单位毫秒//fadeoutDelay 渐隐延迟,单位毫秒//msgDelay 消息 100% 透明度时停留的时间//direction 当前是渐显还是渐隐,>0表渐显,其它值渐隐,由于初始时 Exhibiton 面板中还无内容,所以用 -1function ShowMsg(targetStr, fadeinStep, fadeoutStep, fadeinDelay, fadeoutDelay, msgDelay, direction){ var target = document.getElementById(targetStr); //浏览器兼容开始 var noAlpha = false; //是否支持透明度 try { var curAlpha = target.filters.alpha.opacity; } catch (e) { //取透明度失败,说明不支持透明度 noAlpha = true; } if (noAlpha) { //不支持透明度,直接显示 target.innerHTML = GetMsgData(); setTimeout("ShowMsg(\"" + targetStr + "\", " + fadeinStep + ", " + fadeoutStep + ", " + fadeinDelay + ", " + fadeoutDelay + ", " + msgDelay + ", -1);", msgDelay); return; } //浏览器兼容结束 //支持透明度的浏览器执行以下代码 if (direction > 0) { target.filters.alpha.opacity += fadeinStep; if (target.filters.alpha.opacity < 100) { setTimeout("ShowMsg(\"" + targetStr + "\", " + fadeinStep + ", " + fadeoutStep + ", " + fadeinDelay + ", " + fadeoutDelay + ", " + msgDelay + ", 1);", fadeinDelay); } else { setTimeout("ShowMsg(\"" + targetStr + "\", " + fadeinStep + ", " + fadeoutStep + ", " + fadeinDelay + ", " + fadeoutDelay + ", " + msgDelay + ", -1);", msgDelay); } } else { target.filters.alpha.opacity -= fadeoutStep; if (target.filters.alpha.opacity > 0) { setTimeout("ShowMsg(\"" + targetStr + "\", " + fadeinStep + ", " + fadeoutStep + ", " + fadeinDelay + ", " + fadeoutDelay + ", " + msgDelay + ", -1);", fadeoutDelay); } else { target.innerHTML = GetMsgData(); setTimeout("ShowMsg(\"" + targetStr + "\", " + fadeinStep + ", " + fadeoutStep + ", " + fadeinDelay + ", " + fadeoutDelay + ", " + msgDelay + ", 1);", fadeinDelay); } }}ShowMsg("msgContent", 5, 5, 20, 20, 1000, -1);//--></script></body></html>[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]