滤镜:alpha 与 blendTrans

yunmoxue

浏览: 285437 次
性别:
来自: 郑州

最近访客更多访客>>

daizikang

PollyYeung

xuhuanfeng

bluecoyote

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

ajax

360 IE JavaScript

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完全学习手册> 梁胜民,肖新峰,王占中等编著. 所以写的部分内容中含有原话..

共同成长!!.

example.rar (62.9 KB)
下载次数: 0

分享到：

转自李白 | css滤镜总纲

2009-01-31 18:43
浏览 1684
评论(2)
分类:Web前端
查看更多

2 楼 yunmoxue 2009-02-02

Light
<html>
<head>
<script language="javascript">
//调用设置光源函数
window.onload=setlights;
//获得鼠标句柄
light.onmousemove=mousehandler;
//建立光源的集合
function setlights(){
light.filters[0].clear();
light.filters[0].addcone(0,0,5,100,100,255,255,0,60,30);
}
//捕捉鼠标的位置来移动光束
function mousehandler(){
x=(window.event.x-80);
y=(window.event.y-80);
light.filters[0].movelight(0,x,y,5,1);
}
</script>
</head>
<body>
<table>
<tr>
<td >
<img src=2.gif id="light" style="filter:light" />
</td>
</table>
</body>
</html>

1 楼 yunmoxue 2009-02-02

滤镜:Blur 效果:模糊
属性
enabled 是否激活该滤镜效果
add 指定图片是否改变成模糊效果.有效值为true和false.默认值为true
direction 设定模糊方向,模糊效果是按顺时针方向起作用的.取值0`~360`
strength 指定模糊半径的大小.单位是象素,默认值为5
例子:
<img src="img/1.jpg" style="filter:blur(direction=185,strength=10)" />
<br>
<img src="img/1.jpg" style="filter:blur(add=false direction=225 strength=10)" />
<br>
<p style="width=400;filter:blur(direction=185,strength=10)" >
aaaaaaaaaaa
</p>

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论