滤镜:alpha 与 blendTrans
ie only;
Alpha
效果: 透明.
属性:
enabled 是否激活该滤镜
style 设置透明渐变样式,值范围0~3,0为不渐变,1为线形渐变,2为圆形渐变,3为矩形渐变
opacity 设置透明度,值范围0~100,0为完全透明,100为不透明
finishOpacity 设置结束时的透明度,值范围0~100.
startx 开始透明的横向坐标
starty 开始透明的纵向坐标
finishx结束透明的横向坐标
finishy结束透明的纵向坐标
例1:
由于alpha滤镜使当前元素部分透明,该元素下层内容的颜色对整个效果起着重要的作用,因此颜色的合理搭配相当重要.
BlendTrans
效果: 图片之间的淡入淡出
属性:
enabled 是否激活该滤镜
duration 转换过程所消耗的时间
例:
搭配javascript实现
apply()方法用于捕获对象内容的初始显示,为转换做必要的的准备,只有调用了play()方法才开始转换.
个人理解是:apply(),play()用于显示下一张图象时,当前图象淡出的效果.
根据这两个滤镜写的俩个页面,已经上传.
声明!!:: 本人近期正在研读<css+xhtml+javascript完全学习手册> 梁胜民,肖新峰,王占中等编著. 所以 写的部分内容中含有原话..
共同成长!!.
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完全学习手册> 梁胜民,肖新峰,王占中等编著. 所以 写的部分内容中含有原话..
共同成长!!.