<script language="JavaScript">
<!--
var step = 1; //步长
function show(obj) {
if ((obj.filters.alpha.opacity+step>=100)||(obj.filters.alpha.opacity+step<5)) step=-step;
obj.filters.alpha.opacity+=step;
}
setInterval ("show(me)",100);
//-->
</script>表格代码:
<table border=1 cellpadding=0 cellspacing=0 id="me"style="width:80%;height:150;filter:alpha(opacity=50);" bgcolor=red>
<tr>
<td></td>
</tr>
</table>
代码分析:
函数 show(obj) 中,我们实际上使用了 CSS 的 alpha 滤镜来实现对被修饰对象的颜色的淡入淡出变化。对象的透明度在递加(obj.filters.alpha.opacity+=step;),如果递加到100或当透明度少于5时令透明度值返回步长(step)的相反数(step=-step;),这样,透明度值在5到100之间(可能更改)来回变化,从而得到淡入淡出的结果。
函数产生的效果由 setInterval(参数1,参数1) 控制频率。setInterval()和setTimeout()的结构一致,第一个参数为“事件”,第二个参数为间隔时间(单位为毫秒),setInterval ("show(me)",100);中,show(me)就是事件,me为被修饰对象的id标识。
我们自定义的函数 show(obj) 要在被修饰的对象中产生作用,该对象必须有id标识,且该标识一定与setInterval里的标识一致(同时请注意,该id在整个网页代码中是唯一的)。凡有id标识的HTML标签所对应的对象都会产生函数所定义的效果(比如文本前景色、图片、表格、body的背景色等)。当然,我们这个函数使用了CSS的alpha滤镜,所以本节函数所修饰的对象必须够被alpha修饰(否则没有意义),同时该对象必须有alpha的初始值(详情请查看演示效果中颜色深浅变化着的表格里的代码)。
分享到:
相关推荐
13.6 实例四:图片淡入淡出 13.7 实例五:CSS实现PPT幻灯片 13.8 实例六:灯光效果 13.9 实例七:舞台灯光 13.10 实例八:探照灯 13.11 实例九:鼠标文字跟随 第14章 CSS与XML的...
13.6 实例四:图片淡入淡出 13.7 实例五:CSS实现PPT幻灯片 13.8 实例六:灯光效果 13.9 实例七:舞台灯光 13.10 实例八:探照灯 13.11 实例九:鼠标文字跟随 第14章 CSS与...
13.6 实例四:图片淡入淡出 13.7 实例五:CSS实现PPT幻灯片 13.8 实例六:灯光效果 13.9 实例七:舞台灯光 13.10 实例八:探照灯 13.11 实例九:鼠标文字跟随 第14章 CSS与XML的...
13.6 实例四:图片淡入淡出 13.7 实例五:CSS实现PPT幻灯片 13.8 实例六:灯光效果 13.9 实例七:舞台灯光 13.10 实例八:探照灯 13.11 实例九:鼠标文字跟随 第14章 CSS与XML的...
13.6 实例四:图片淡入淡出 13.7 实例五:CSS实现PPT幻灯片 13.8 实例六:灯光效果 13.9 实例七:舞台灯光 13.10 实例八:探照灯 13.11 实例九:鼠标文字跟随 第14章 CSS与XML的...
13.6 实例四:图片淡入淡出 13.7 实例五:CSS实现PPT幻灯片 13.8 实例六:灯光效果 13.9 实例七:舞台灯光 13.10 实例八:探照灯 13.11 实例九:鼠标文字跟随 第14章 CSS与XML的综合运用 14.1...
13.6 实例四:图片淡入淡出 13.7 实例五:CSS实现PPT幻灯片 13.8 实例六:灯光效果 13.9 实例七:舞台灯光 13.10 实例八:探照灯 13.11 实例九:鼠标文字跟随 第14章 CSS与XML的...
2.jquery+css五屏焦点图淡入淡出+圆形按钮切换广告图片代码 3.jQuery+CSS实用图片收缩与放大效果插件 4.jquery+div实现同时滑动切换的图文展示特效插件下载 5.jquery+div带动画按钮图片手动与自动切换的特效...
9_7.htm 淡入淡出的文字效果。 9_8.htm 炽热文字的特殊效果。 第10章(\10) 示例描述:页面中的链接地址个性化。 10_1.htm 按时消失的链接。 10_2.htm 带滚动提示的链接。 10_3.htm 动态变换的链接。 ...
9_7.htm 淡入淡出的文字效果。 9_8.htm 炽热文字的特殊效果。 第10章(\10) 示例描述:页面中的链接地址个性化。 10_1.htm 按时消失的链接。 10_2.htm 带滚动提示的链接。 10_3.htm 动态变换的链接。 ...
实例258 设置窗体背景颜色为淡蓝色 329 实例259 实现带背景图片的窗体 330 实例260 使背景图片自动适应窗体的大小 331 实例261 背景为渐变色的主界面 332 实例262 随机更换窗体背景 334 11.5 窗体形状及应用 335 ...
3.1 去下划线+主题下陷效果+关闭贴增加删除线 评分自动发送PM通知 批量加精,置顶(单贴),删除,移动,关闭主题+美化 论坛跳转默认停在当前板块 论坛精华区的插件 论坛公告淡入淡出 ...
代码范例列表 第1章 示例描述:本章演示如何开始使用JDK进行程序的开发。 HelloWorldApp.java 第一个用Java开发的应用程序。 firstApplet.java 第一个用Java开发的Applet小程序。 ...示例描述:本章介绍开发Java的基础...
ACCESS 到高级表格.ec Access操作.ec Access数据库压缩修复新建.ec ACCSEE记录显示到超级列表框模块.ec ACSII 加解密模块2.0.ec AD.ec ADO方式填充树型框.ec API操作模块.ec API的使用方法.ec API 设置颜色对话框...