css3高级滤镜-切换滤镜

最新推荐文章于 2022-08-25 12:02:17 发布

清濛

最新推荐文章于 2022-08-25 12:02:17 发布

阅读量630

点赞数

分类专栏： css3 文章标签： css3

本文链接：https://blog.csdn.net/xyy_933/article/details/51314143

版权

css3 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>切换滤镜（RevalTrans）</title>
<style type="text/css">
.revaltrans{
filter:revalTrans(Duration=3,Transition=10);
}
</style>
</head>
<body >
<h1>切换滤镜</h1>
<ul>相关参数:
<li>1.是否激活滤镜</li>
<li>2.duration：设置用于切换的停留时间</li>
<li>3.transition:用于指定转换方式</li>
<ul>实例：
<img src="img/11.jpg" class="revaltrans" id="imgpic">
<script>
//声明数组，数组元素的个数就是图片的个数，然后给数组元素赋值，值为图片的路径
imgnum=new ImgArray(2);
imgnum[0]="img/1.jpg";
imgnum[1]="img/3.jpg";
//获取数组的记录数
function ImgArray(len){
this.length=len;
}
var i=1;
//转换过程
function playimg(){
if(i==1)
{
i=0;
}
else{
i++;
}
imgpic.filters[0].apply();
imgpic.src=imgnum[i];
imgpic.filters[0].play();
//设置演示时间，4000表示延迟4秒，
//滤镜中设置的转换时间值，当转换结束后还停留了一段时间
timeout=setTimeout("playimg()", 4000);
}
</script>
</ul>
</ul>
</body>
</html>