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


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

 CSS的RevealTrans动态滤镜是一个神奇的滤镜,它能产生23种动态效果,更为奇妙的是它还能在23种动态效果中随机抽用其中的一种。用它来进行网页之间的动态切换,简直方便极了,你只要在网页源代码的< head >与< /head >之间插入这样一行代码:< Meta content=revealTrans(Transition=14,Duration=3.0) http-equiv=Page-enter >,当你进入这个页面时,网页将象拉幕一样从中间向两边拉开,是不是别具一格?!
  RevealTrans滤镜只有两个参数,Duration:是切换时间,以秒为单位;Transition:是切换方式,它有24种方式,详见下表:

切换效果   Transition参数值      切换效果       Transition参数值 
矩形从大至小 0 随机溶解 12
矩形从小至大 1 从上下向中间展开 13
圆形从大至小 2 从中间向上下展开 14
圆形从小至大 3 从两边向中间展开 15
向上推开 4 从中间向两边展开 16
向下推开 5 从右上向左下展开 17
向右推开 6 从右下向左上展开 18
向左推开 7 从左上向右下展开 19
垂直形百叶窗 8 从左下向右上展开 20
水平形百叶窗 9 随机水平细纹 21
水平棋盘 10 随机垂直细纹 22
垂直棋盘 11 随机选取一种特效 23


  因此,你只要改变RevealTrans滤镜的“Transition"的值,就能获得不同的网页切换效果,是不是太方便了点?但很遗憾,要把 RevealTrans滤镜用于网页中的某个对象就没有这么简单了,它必须借助于Javascript来调用其方法,才能实现,这就是说要动手编程序了。 但也不是太难,下面我将通过一个制作动态字幕变换的例子来说明其使用方法。
渐淡字幕变换效果
  这个例子演示了利用Javascript程序控制Revealtrans滤镜来实现字幕逐渐淡出和渐进的效果,请看下面的效果图:

图1 开始的字幕

图2 渐变中的字幕

图3 第二幅字幕

  上面的效果看起来好象不好,是吗?实际效果看起来比这漂亮多了。由于是动态转换,上面只是我抓的三张图片,只能帮助你了解其转换过程,真正的效果只有待你按我下面讲的方法动手做出来才能看到。请看制作方法:
  1、制作一个Revealtrans滤镜,取名为“mytrans",其制作方法与前面介绍的静态滤镜相同,参数值为Transition=12,Duration=2。设置好后,在网页源代码的< head >与< /head >之间将有下面这样的代码:
< style type="text/css" >
< !--
.mytrans { filter:revealTrans(Transition=12,Duration=2)}
-- >
< /style >
  2、插入一个层,我们把层的“Layer ID”改为“div1”(可直接在层的属性面板上加入即可),并设置好层的背景和调整好层的大小,并把Revealtrans滤镜加载到到层上,这时你看到的层的标记代码是这样的:< div id="div1" style="position:absolute; width:680px; height:30px; z-index:37; background: #FFFFCC; layer-background-color: #FFFFCC; border: 1px none #000000" class="mytrans" >< /div >
  3、在网页源代码的< head >与< /head >之间插入下面这段Javascript程序:
  < script language="JavaScript" >
  < !--
  function HelpArray(len)
  {
  this.length=len;
  }
  // 建立一个数组,存放转换的内容。
  HelpText=new HelpArray(5);
  HelpText[0]="在一个文档使用动态转换的滤镜(Revealtrans)其实是很容易的。";
  HelpText[1]="首先,为对象的样式表单建立一个需要转换的“Revaltrans"滤镜,";
  HelpText[2]="然后,使用“apply()"方法防止错误,";
  HelpText[3]="现在,你可以改变任何你想改变的东西,";
  HelpText[4]="最后,“play()"方法开始进行转换。";
  ScriptText=new HelpArray(5);
  var i= -1;
  // 显示转换效果
  function playHelp()
  {
  if (i==4)
  { i=0 ;}
  else
  { i++; }
  div1.filters[0].apply();
  div1.innerText=HelpText[i];
  div1.filters[0].play();
  // 设置每段字幕演示的时间,以毫秒计。这里的时间要长于滤镜中的时间,以保证在转换结束后能停留一段时间。
  // 以方便看清楚字幕内容。在本例中字幕演示的时间是6秒,滤镜中设置的转换时间是2秒。
  mytimeout=setTimeout("playHelp()",6000);

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



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