Vb教程 Vb.net教程 Vfp教程 C/C++教程 Vc/Vc++教程 Delphi教程 Java教程 Powerbuilder
  杀毒频道 | 短信频道 | 网络电视 | 论文中心 | 学上网 | 学软件 | 网页特效 | 电脑基础 | 论坛  
  NCRE | 软考 | CET | 职称英语 | 司法考试 | 报关员 | 公务员 | CATTI | CPA考试  
  Html教程 | Css教程 | Xml教程 | Asp教程 | Asp.net | Php教程 | Jsp教程 | Linux教程 | QQ技巧  
Photoshop Illustrator ImageReady Maya教程 3D Max教程 Lightscape Coredraw教程 Authorware Autocad教程 Freehand教程
Access教程 Mysql教程 Sql server Oracle教程 Word教程 Excel教程 Powerpoint Frontpage Asp.net源码 Php源代码
Flash教程 Fireworks Dreamweaver C#教程 outlook教程 系统安装 vbscript教程 Javascript Jsp源代码 Asp源代码
您的位置:首页 >> Html教程

自学动态Html---教程七

文章来源:中国石油大学

哈哈,今天又有新的东西介绍给您,您知道过滤器(filter)吗?如果您经常使用图形软件(如PhotoShop等),那您肯定有所了解。过滤器可以用来对可见对象进行过滤以达到各种动态的效果。CSS拥有扩充的过滤器,我们可以将它与动态HTML相结合,制造出各种动态效果。有些书上将它称为“过渡”,它是IE4.0动态HTML技术的一部分。对于所有可视化的对象,我们都可以使用过渡的方法将它从一种状态转换为另一种状态,并且这种转换过程在浏览器重视可以清楚看到的。
HTML4.0有两种类型的过渡过滤器:Blend和Reveal。
Blend过渡可以在指定的时间间隔内实现图像的简单淡出和淡入,基本句型为:
style="filter:blendTrans(Duration=过渡的时间)"//过渡时间的单位为"秒"
而Reveal过渡可以通过使用不同的技术选择地显示或隐藏图像,它的效果有很多,基本句型是:
style="filter:revealTrans(Duration=过渡的时间,Transition=过渡的类型)"//过渡时间的单位为"秒",Transition的取值范围是0~23
下面就是一个用Blend过滤图像的例子。

例19 图像自动交替地淡出
<html>
<head>
<title>DHtml举例19</title>
<style><!--
body {font-size:9pt}
-->
</style>
<script language="JavaScript">
var flag=0;
//全局变量flag用来控制绘出的图象;flag=0时绘出图象lkjx2.jpg,而flag=1时则绘出lkjx1.jpg
var act;

function Change(){
act=window.setInterval("AutoChange()",9500);//每隔9.5秒钟执行函数AutoChange()
}//function

function AutoChange(){
if(flag==0)
{
flag=1;
Img.filters.blendTrans.Apply(); //用Apply方法停止原图象的绘出
Img.src = "lkjx2.jpg"; //将Img设置成另一幅图象jklx2.jpg
Img.filters.blendTrans.Play(); //用Play方法调用过滤器的淡出效果
}
else
{
flag=0;
Img.filters.blendTrans.Apply();
Img.src = "lkjx1.jpg";
Img.filters.blendTrans.Play();
}//if
}//function

</script>
</head>
<body onload="Change()">
<img id="Img" src="lkjx1.jpg" alt="会变换的图象!" style="filter:blendTrans(duration=7)">
</body>
</html>

act=window.setInterval("AutoChange()",9500)设置的时间(9.5秒)一定要比style="filter:blendTrans(duration=7)"设置的时间(7秒)长,否则将产生脚本语言出错。

本例的效果如下:

会变换的图象!

既然Reveal有24种之多的过渡效果,我们就不妨试试看。

例20 Reveal过渡过滤器的24中动态效果
<html>
<head>
<title>DHtml举例19</title>
<style><!--
img.i1 {
width:100;
height:230;
}
-->
</style>
<script language="JavaScript">
var shape=0;//变量shape用来存储transition的数值,即动态效果的类型
var flag=0;
//全局变量flag用来控制绘出的图象;flag=0时绘出图象lkjx2.jpg,而flag=1时则绘出lkjx1.jpg
var act;

function ChangeImg(){
act=window.setInterval("ChangeShape()",7500);//每隔7.5秒钟执行函数ChangeShape()
}//function

function ChangeShape(){
if(shape==24) shape=0; //因为transition的值在0~23之间,故不能让它超过23
if(flag==0)
{
Insert.innerHTML="<img id='Shp' src='lkjx1.jpg' class=i1 style='filter:revealTrans(duration=6,transition="+shape+")'><br>这是transition="+shape+"时的效果";
Shp.filters.item(0).Apply(); //用Apply方法停止原图象的绘出
Shp.src='lkjx2.jpg'
Shp.filters.item(0).Play(); //用Play方法调用过滤器的动态效果
flag=1;
}
else
{
Insert.innerHTML="<img id='Shp' src='lkjx2.jpg' class=i1 style='filter:revealTrans(duration=6,transition="+shape+")'><br>这是transition="+shape+"时的效果";
Shp.filters.item(0).Apply(); //用Apply方法停止原图象的绘出
Shp.src='lkjx1.jpg'
Shp.filters.item(0).Play(); //用Play方法调用过滤器的动态效果
flag=0;
}//if
shape++; //shape自身加1
}//function

</script>
</head>
<body onload="ChangeImg()">
<p id="Insert"><img id="Shp" src="lkjx1.jpg" alt="会变换的图象!" style="filter:revealTrans(duration=6,transition=00)"></p>
</body>
</html>

[返回]

编程语言 web开发 数据库 网络技术 操作系统 服务器 网页设计 图形设计 办公软件 常用软件 学电脑

Copyright© www.bianceng.cn Powered by 编程入门网 All Rights Reserved.
关于本站 | 版权声明 | 联系我们 | 友情链接 |
编程入门网 版权所有