首页
精品网站
艺术设计
网络学院
信息中心
求职招聘
网站综合
服装网站
编程开发
设计论坛
投稿
我要上榜
设计资源站
Dreamweaver
Flash
Photoshop
其它周边
web标准
asp
php
.net
CSS
WAP网站攻略
专题
上海网站建设
网站建设
域名注册
虚拟主机
广州网站设计
域名注册
广州网站建设
上海网站建设
虚拟主机
广州网页设计
虚拟主机
域名注册
acg
ACG玩家
品牌设计
当前位置:
网络学院首页
>>
设计教程
>>
web标准
>> CSS:BlendTrans滤镜
CSS:BlendTrans滤镜 (1)
网站色彩搭配讲解
跟我探索网站排名的捷径
网页banner设计欣赏
网站装饰图标设计欣赏
设计赛事集合
ACG王国
来源:
中国设计秀
作者:
点击:
532
加入收藏
BlendTrans滤镜比起上一篇介绍的Revealtrans滤镜来要简单一些,它只有一个参数:Duration 变换时间,它的功能也比较单一,就是产生一种淡入淡出的效果,不过它的这种效果比起RevealTrans滤镜的淡入淡出效果来要精细的多,你看看下面也就不言而喻了。
图1 第一幅图片
图2 转换中的图片
图3 第二幅图片
由于是动态转换,上面只是我抓的三张图片,只能帮助你了解其转换过程,真正的效果只有待你按我下面讲的方法动手做出来才能看到。使用 BlendTrans滤镜也和Revealtrans滤镜一样,需要借助于Javascript来调用它的方法来实现,我们现在就以实现上面这种效果为例 来看看如何使用BlendTrans滤镜,首先你必须准备几张同样大小的图片。
制作方法:
1、用老办法(前面的文章已介绍了多次)制作一个BlendTrans滤镜,取名为“myblen",Duration设置为“3"(即转换时间为3秒),滤镜设置好后,在网页源代码的< head >与< /head >之间将有下面这样的代码:
< style type="text/css" >
< !--
.myblen { filter:blendTrans(Duration=3)}
-- >
< /style >
2、插入第一张图片,在图片的属性面板上给图片加个名称:myimg;
3、把BlendTrans滤镜加载到图片上;这时图片的“img"标记的代码是这样的:< img src="image/cssp1.jpg" width="200" height="134" class="mybend" name="myimg" align="left" >;
4、在网页的源代码< head >与< /head >之间插入下面这段Javascript程序:
< script language="JavaScript" >
< !--
// 获取数组记录数
function ImgArray(len)
{
this.length=len;
}
// 申明数组并给数组元素赋值,也就是把图片的相对路径保存起来,若是图片较多,可增加数组元素的个数,
// 我在这个例子中只用了三张图片,所以数组元素个数为“3"。
ImgName=new ImgArray(3);
ImgName[0]="image/cssp2.jpg";
// 你在制作时要把这里的"image/cssp2.jpg"换成你的图片所在的路径和图片文件名;
ImgName[1]="image/cssp3.jpg";
// 你在制作时要把这里的"image/cssp3.jpg"换成你的图片所在的路径和图片文件名;
ImgName[2]="image/cssp1.jpg";
// 你在制作时要把这里的"image/cssp1.jpg"换成你的图片所在的路径和图片文件名;
var i=1;
// 演示变换效果
function playImg()
{
if (i==2)
{ i=0 ;}
else
{ i++; }
myimg.filters[0].apply(); // 这里的“myimg”是你在网页中插入的那张图片的代号,
myimg.src=ImgName[i]; // 当你改变了插入的图片代号时,这里也一定要改变,
0
顶一下
[1]
[
2
]
2007-10-22 12:33:00 出处:
输入您的搜索字词
提交搜索表单
本文引用地址:
http://www.cnwebshow.com/edu/html/article_1425.html
热点文章/相关文章
素材下载
矢量
潮流素材
背景素材
模板
最新文章
·
css代码:网页圆角的做法
·
@import在IE下的闪烁BUG
·
用符合标准的html代码编写专题...
·
工作中常用的高效的CSS代码
·
首页前端技术分享:清除浮动
·
IE下绝对定位的元素不能响应鼠...
·
XHTML+CSS兼容性解决方案小集
·
WEB标准中如何优化你的CSS代码?
·
CSS样式表文件的优化及其技巧
·
网页设计中CSS加载方式对页面优...
艺术设计秀最新图片
国外优秀图形插画...
Valding Deborah包...
Children's Aid S...
国外Joseph Willi...
日本著名插画设计...
Kedar Chavan平面...
推荐文章
·
css代码:网页圆角的做法
·
用符合标准的html代码编写专题...
·
首页前端技术分享:清除浮动
·
IE下绝对定位的元素不能响应鼠...
·
XHTML+CSS兼容性解决方案小集
·
!important在ie7.0的hack方法
·
web标准:CSS clear的属性及使...
·
CSS三栏布局中最先显示中栏的方法
音乐
嫁衣
画心
放生
天亮了
牡丹江
那滋味
擦肩而过
怀念过去
北京欢迎你
突然好想你
吻的太逼真
说好的幸福呢
坐上火车去拉萨
没有人比我更爱你
愚爱
心碎
稻香
带我走
醉赤壁
魔杰座
我还想她
明天过后
一定要爱你
等爱的玫瑰
原谅我一次
越单纯越幸福
最后一次的温柔
给我一首歌的时间
白狐
光荣
降临
下雨天
小酒窝
樱花草
恋爱新手
说唱脸谱
红色高跟鞋
寂寞才说爱
深深爱过你
爱上你是个错
即使知道要见面
不是因为寂寞才想你
城府
假如
花海
兰亭序
棉花糖
舍不得
最后一次
女人如烟
外滩十八号
我们的纪念
我们的无奈
心在跳情在烧
爱上你是我的错
爱情里没有谁对谁错
网站地图
|
关于我们
|
联系我们
|
网站建设
|
广告服务
|
版权声明
|
免责声明
|
网站公告
|
友情链接
|
留言
|
旧版入口
Copyright © 2005-2008
中国设计秀_网页设计秀_艺术设计秀_网页设计教程_网站建设作品_平面设计欣赏_包装设计欣赏_品牌网站建设
All Right Reserved.
做最专业的设计服务网站,秀出自我,秀出精彩!
中国设计秀,秀---无处不在!!
交流群:9107036 3848215 8850631
粤ICP备05067046号