自学动态Html之七--人文中国

您现在的位置：人文中国 >> 文章中心 >> 技术专区 >> DHTML(动态html) >> 文章正文

没有公告

自学动态Html之七

顶热荐

【字体：小大】

自学动态Html之七

作者：renwen 文章来源：本站原创点击数：更新时间：2003-10-30

DHTML教程7

自学动态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>
</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>
</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='http://www.renwen.net/test/dhtml/lkjx1.jpg' class=i1 style='filter:revealTrans(duration=6,transition="+shape+")'><br>这是transition="+shape+"时的效果";
    Shp.filters.item(0).Apply();    //用Apply方法停止原图象的绘出
    Shp.src='http://www.renwen.net/test/dhtml/lkjx2.jpg'
    Shp.filters.item(0).Play();    //用Play方法调用过滤器的动态效果
    flag=1;
    }
else
    {
Insert.innerHTML="<img id='Shp' src='http://www.renwen.net/test/dhtml/lkjx2.jpg' class=i1 style='filter:revealTrans(duration=6,transition="+shape+")'><br>这是transition="+shape+"时的效果";
    Shp.filters.item(0).Apply();    //用Apply方法停止原图象的绘出
    Shp.src='http://www.renwen.net/test/dhtml/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>

本例的动态效果如下：

会变换的图象！

文章录入：renwen1 责任编辑：renwen1

上一篇文章：自学动态Html之六

下一篇文章：自学动态Html之八

【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口】

最新热点		最新推荐		相关文章
				cn域名48元,com域名55元 Java实现类MSN、QQ好友上线通… 新手问题 JavaScript技巧4例 java技巧：如何在屏幕上定位… JScript Error Messages （J… javascript精品源代码--鼠标… 代理合同多多指教！！去GG寝室的死法

　网友评论：（只显示最新10条。评论内容只代表网友观点，与本站立场无关！）