来源:ITPOW(www.itpow.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.itpow.com/" target="_blank">ITPOW www.itpow.com 专业探讨【ASP、JavaScript、XHTML+CSS、SQL Server】</a> <hr> </div> <div id="msg"> <div id="msgContent"></div> </div> <script language="javascript"> <!-- //ITPOW www.itpow.com var msgArr = new Array( "夜慢慢黑去,我开始淡去", "天开始亮了,而我又是谁", "又有谁知道大海深处是我的泪", "又有谁知道威山脚下有我的脆弱" ); var msgIndex = -1; //消息下标,这里是最小有效值-1 var 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 面板中还无内容,所以用 -1 function 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 全部选择 提示:你可先修改部分代码,再按运行]
创建于2005年 渝ICP备05010272号-1
电邮:cftea@126.com