新颖的渐变效果公告板
沈欣
2000年 第45期
“文字公告板”是网页上经常使用的信息发布方式，通常的“文字公告板”都使用文字滚动的方式，看得多了，就缺少新鲜感。这里向读者介绍一个利用渐变滤镜实现的“文字公告板”，以文字渐显的过渡方式转换一幅幅的文字信息，新颖有趣，有很好的视觉效果。该“文字公告板”是一个结合DHTML语句编写的实用程序，包括三个程序文件。（^45040201a^）
（1）主页面文件：banner.htm，它包含了公告板的框架和公告板javascript脚本的外部文件引用。
（2）公告板信息条目文件：myinfo.js，将需要发布的信息条目和链接地址按顺序依次填入相应数组项内。当信息需要更新时，将此文件的内容更新后重新上传即可。
（3）公告板的控制程序文件：myjavascript.js，它包含公告板显隐控制程序。
以外部引用的方式使用javascript脚本文件可以使主页面的内容比较简洁。实际使用时，只要将主页面内的公告板框架内容和脚本程序的引用部分放置到你自己页面上的相应位置，就可正常使用了。本程序使用了“filter:blendTrans（duration=2）”渐变滤镜，其中的“duration=2”是设置渐变过程中文字的显示持续时间。每一幅文字页面转换时间的间隔是用“setTimeout（″show_banner（）″，10000）”语句设置的，这里的时间间隔参数为10000，即10秒。这两个参数可根据自己的需要作相应地调整。程序中的bt.gif是公告板标题图像，point.gif是一个圆点图像，用来罗列信息条目。
下面分别给出三个程序文件的源程序。
（1）公告板主页面源程序banner.htm
渐变效果公告板演示页面
（2）填写公告板发布信息条目的脚本程序myinfo.js
//下面创建两个数组，Text数组填入文字内容，长度不超过20个汉字，Link数组填入与文字相对应的链接地址，数组序号要保持连续。信息条目的多少不限，本程序设定一幅页面显示四个条目。更新信息时，只需修改本文件的信息内容后上传。到站点复盖旧文件后，即可实现公告板内容的更新。
Text = new Array（）;
Link = new Array（）;
Text[0]=″这是一个渐变效果的公告板″;
Link[0]=″http://www.sohu.com″;
Text[1]=″它和普通的文字滚动的公告板有所不同″;
Link[1]=″http://firstsx.topcool.net.com″;
Text[2]=″它的显示效果是很好的。″;
Link[2]=″http://www.sina.com.cn″;
Text[3]=″有一个良好的视觉效果和不会影响人们的视线″;
Link[3]=″http://www.sohu.com″;
Text[4]=″IBM硬盘现在又降价了，快去买吧！″;
Link[4]=″http://www.sohu.com″;
Text[5]=″Intel公司又到了点仓的时间了，CPU又要降！″;
Link[5]=″http://www.sohu.com″;
Text[6]=″现在是攒机的好时机。″;
Link[6]=″http://www.sohu.com″;
//你可随意增加任意多个信息条目。
（3）公告板的控制程序myjavascript.js
banner= new Array（）; // 建立一个存放公告板页面的数组
point=″
″; //圆点图像存入变量
var Text_len=Text.length; //信息条目的数量存入Text_len变量
pages=0;
lines=0;
banner[pages]=″″;
//下面将信息条目分配到每一个页面中
for（i=0;i″＋Text[i]＋″
″;
lines＋＋;
//下面设定每一幅页面显示四条信息。
if（lines==4） {
pages＋＋;
banner[pages]=″″;
lines=0;
}
}
var loop=0; // 设置初始显示页为第0页
var banner_len=banner.length－1; // 计算出公告板的页长
// 下面创建显示公告板内容的函数
function show_banner（） {
banner_text.filters[0].Apply（）;
banner_text.innerHTML=banner[loop]; //将每一页的内容填入banner_text对象中
banner_text.filters[0].Play（）; //开始一个渐变滤镜效果
//以下表示如果到达最后一页，则返回到第一页，否则页数加1
if（loop==banner_len） {
loop=0;
}
else {
loop＋＋;
}
//最后设置公告板页面之间的转换速度，目前是10秒
window.setTimeout（″show_banner（）″，10000）;
}
