中国设计联盟
联网
Dreamweaver Flash Photoshop 其它周边 web标准 asp php .net CSS WAP网站攻略 专题
域名注册 虚拟主机 广州网站设计 域名注册 广州网站建设 上海网站建设 虚拟主机 广州网页设计  虚拟主机 域名注册 acg王国 ACG玩家
求创科技
上海网站建设
中国福网
招聘求职
中国互联
中国设计秀
中资源
当前位置:网络学院首页 >> 设计教程 >> web标准 >> CSS:RevealTrans

CSS:RevealTrans (1)

来源:中国设计秀    作者:    点击:355     加入收藏
 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);

0
顶一下
[1] [2]
2007-10-22 12:31:00    出处:
网站地图 | 关于我们 | 联系我们 | 网站建设 | 广告服务 | 版权声明 | 免责声明 | 网站公告 | 友情链接 | 留言 | 旧版入口