打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
DHTML幻灯片播放程序(一)
DHTML幻灯片播放程序(一)
  这是一个幻灯片播放程序,也就是一图片轮流播放的程序。我们在一些站点上可以看见这种形式的广告播放条,大多是用CGI做的,也就是要服务器端支持CGI程序,如ASP、PHP、Perl等。但我们这里的实现方法无需CGI,用的仅是CSS的效果,再加上JavaScripts的控制。只要你的浏览器是IE 4.0以上或是Netscape 3.0以上的就可以了。只不过在这里我们用到了CSS的Filter滤镜效果,该效果只能在IE中出现。有关CSS的Filter滤镜效果,大家可以参看我的《CSS中Filter滤镜详解》,该文章在Yesky.com上已经发表。
好了,让我们来做点准备工作吧。

  首先,为了制作这个效果,我们首先要打几个尺寸一样大小的图片,让其轮流播放。比如,我找了下面三个88x31的图片做为所用的的图片。


  其次,让我们再来复习一下CSS中Filter的图片转换滤镜的知识:

CSS中的显示转换滤镜

  显示转换滤镜提供的是一种更为多变的转换效果,它不像混合转换滤镜,只提供一种淡入淡出的效果,它还提供了更多的图片转换效果,它的语法是:

Filter : RevealTrans ( duration = 转换的秒数,transition=转换类型 )

  大家可以看见,它有一个转换类型的参数,这里,它提供了24种转换类型,我们只需指定转换类型的代号,就可以让图片按特有的转换效果进行转换。下表就是24种转换滤镜的形式及其对应的代号:
显示转换滤镜的转换形式所对应的代号显示转换滤镜的转换形式所对应的代号
矩形从大至小0随机溶解 12
矩形从小至大1垂直向内裂开13
圆形从大至小2垂直向外裂开14
圆形从小至大3水平向内裂开15
向上推开4水平向外裂开16
向下推开5向左下剥开17
向右推开6向左上剥开18
向左推开7向右下剥开19
垂直形百叶窗8向右上剥开20
水平形百叶窗9随机水平细纹21
水平棋盘10随机垂直细纹22
垂直棋盘11随机选取一种特效23
本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
如何制作漂亮的ppt视频
10个国外Ajax及Javascript实例资源网站
代码入门教程(26)
DHTML行为介绍
图片轮显代码大全(JS幻灯片) >>WwW.SKYuu.CoM 幽幽天空 幽U天空 平面设计 网页设计 网站建设
XHTML教程|CSS教程|XHTML+CSS教程|DHTML教程|前台资源推荐|菜鸟吧致...
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服