2012-10-22 来源:网络
【实例名称】
文字幻灯片
【实例描述】
幻灯片在图像切换中应用非常广泛,有时为了增加页面的美观性,也需要为文字内容设置幻灯片。本例通过JavaScript和CSS的结合,学习制作文字幻灯片。
【实例代码】
<script language="JavaScript"> //用数组存放循环显示的信息 Text = new Array( "<a href='http://www.google.com' target='_blank' class='cr4'>我们的理工科学生必须要学习语文</a>", "<a href='http://www.google.com' class='cr4'>英语不过不能毕业,现在汉语不过也不能毕业</a>", "<a href='http://www.google.com' target='_blank' class='cr4'>要求所有理工科学生必须要学习语言、文学等方面的两门...</a>", "<a href='http://www.google.com' target='_blank' class='cr4'>文化素质教育核心课程”北京航空航天</a>", "<a href='http://www.google.com' target='_blank' class='cr4'>有必要。中国人国语不行还谈什么</a>" ) var IDX= -1; //用来循环显示内容的方法 function playAd() { if (IDX==Text.length-1) { IDX=0; } else { IDX++; } var prefix = ""; divText.filters[0].apply(); //应用滤镜效果 divText.innerHTML = prefix + Text[IDX];//注意divText是表格中单元格的ID divText.filters[0].play(); to = setTimeout("playAd()",6000); //定时器用来循环显示 } </script>
需要在body中添加一个table,用来定义内容显示的区域,代码如下所示: <table width=453 border=0 cellspacing=3 cellpadding=0> <tr bgcolor=CCF4B9> <td height=30 bgcolor=CCF4B9 id=divText class=trans></td> </tr> <script>playAd()</script> </table> </body> </html>
【运行效果】
【难点剖析】
本例的重点是对象滤镜的使用。Javascript为对象提供了“filters”属性.专门用于设置滤镜效果。其总共有三种方法,语法和注释如下所示:
对象名.filters(滤镜数值).Apply( ) //装备滤镜
对象名.filters(滤镜数值).play( ) //开始播放滤镜效果
对象名.filters(滤镜数值).Stop( ) //停止滤镜效果
【源码下载】