首页  |  精品网站  |  原创作品秀   |  艺术设计  |  网络学院  |  信息中心  |  站内搜索  |  求职招聘  |  建站资源  |  服装网站  |  编程开发 |  设计论坛 
  平面设计 画册 VI欣赏 包装 CG-插画   酷站 个人网页 商业网站   Alexa排名 CSS 建站资源 下载专区 JS特效 品牌服装 服装院校   专题欣赏 SEO 图标欣赏
域名注册 虚拟主机 广州网站建设 广州网页设计 IDC赞助 设计资源下载 虚拟主机 域名注册 品牌网站建设 服装品牌网站建设 广告服务 网站推广 娱乐
当前位置:首 页 >> 网络学院 >> Dreamweaver ※ FrontPage >> CSS:BlendTrans滤镜


中资源
转载请注明出处-中国设计秀-cnwebshow.com

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]; // 当你改变了插入的图片代号时,这里也一定要改变,

<< 1 2 >>
转载请注明出处-中国设计秀-cnwebshow.com



投稿 】【对本文进行评论】 【字体: 】【发布于2007-10-22 12:33】
 认证LOGO下载
     
Copyright © 2005-2007 中国设计秀_网页设计教程_优秀网页设计欣赏_平面设计欣赏 All Right Reserved.
做最专业的设计服务网站,秀出自我,秀出精彩!中国设计秀,秀---无处不在!!
QQ:54292427  8208442 MSN:kingvisual#hotmail.com 交流群:9107036 3848215 8850631
粤ICP备05067046号 RSS