滤镜:alpha 与 blendTrans

最新推荐文章于 2018-09-02 10:29:38 发布

yzbczq

最新推荐文章于 2018-09-02 10:29:38 发布

阅读量160

点赞数

分类专栏： ajax 文章标签： 360 IE JavaScript ViewUI

本文链接：https://blog.csdn.net/yzbczq/article/details/83335101

版权

ajax 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

ie only;

Alpha
效果: 透明.
属性:
enabled 是否激活该滤镜
style 设置透明渐变样式,值范围0~3,0为不渐变,1为线形渐变,2为圆形渐变,3为矩形渐变
opacity 设置透明度,值范围0~100,0为完全透明,100为不透明
finishOpacity 设置结束时的透明度,值范围0~100.
startx 开始透明的横向坐标
starty 开始透明的纵向坐标
finishx结束透明的横向坐标
finishy结束透明的纵向坐标

例1:

 <img src="1.jpg" style="filter:alpha(opacity=60 style=1)" />

例2:

 <body bgcolor=black>
 <font color=yellow size=5 style="filter:alpha(opacity=60 style=1)">JAVAEYE</font>
 </body>

由于alpha滤镜使当前元素部分透明,该元素下层内容的颜色对整个效果起着重要的作用,因此颜色的合理搭配相当重要.

BlendTrans
效果: 图片之间的淡入淡出
属性:
enabled 是否激活该滤镜
duration 转换过程所消耗的时间

例:
搭配javascript实现

<script language="javascript">
imge = new ImgArray(2);
imge[0] = "img/1.jpg";
imge[1] = "img/2.jpg";
imge[2] = "img/1.gif";
var i = 1;
function ImgArray(len){
this.length = len;
}
function play(){
if(i==2){
i=0;
}else{
i++;
}
pp.filters[0].apply();
pp.src=imge[i];
pp.filters[0].play();
timeout=setTimeout('play()',4000);
}
</script>
</head>
<body onload="play()">
<img src = "img/1.jpg" style="filter:blendtrans(duration=3)" id="pp" />
</body>

apply()方法用于捕获对象内容的初始显示,为转换做必要的的准备,只有调用了play()方法才开始转换.
个人理解是:apply(),play()用于显示下一张图象时,当前图象淡出的效果.

根据这两个滤镜写的俩个页面,已经上传.

声明!!:: 本人近期正在研读<css+xhtml+javascript完全学习手册> 梁胜民,肖新峰,王占中等编著. 所以写的部分内容中含有原话..

共同成长!!.