您的位置：首页 > Web前端 > JavaScript

revealTrans的神奇运用

2008-12-22 00:09 405 查看

CSS的RevealTrans动态滤镜能产生23种动态效果.

如果是对整个网页进行操作, 只要在网页源代码的< head >与< /head >之间插入这样一行类似这样的代码：< Meta content=revealTrans(Transition=14,Duration=3.0) http-equiv=Page-enter >，当你进入这个页面时，网页将象拉幕一样从中间向两边拉开!
RevealTrans滤镜只有两个参数，Duration：是切换时间，以秒为单位；Transition：是切换方式，它有24种方式，详见下表：

因此，你只要改变RevealTrans滤镜的“Transition"的值，就能获得不同的网页切换效果. 但有一个缺点，要把RevealTrans滤镜用于网页中的某个对象必须借助于Javascript才能实现，这就是说要动手编程序了。
首先给某个对象设置style, 并设置过滤器类型: "filter:revealTrans(Transition=12, Duration=5)";

注意: filter样式只有IE4+才支持, firefox3.0目前还不支持.

在javascript中写入这样的代码就可以运用了.
div.filters[0].apply();
div.innerText="Hello";
div.filters[0].play();
// 设置每段字幕演示的时间，以毫秒计。

示例:

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<script>
   function disappear(){
  content.filters[0].apply()
        content.innerHTML = "<span style='color:cc0099;font-size:30;'>Good</span>"
        content.filters[0].play();
   }
</script>
</head>
<body onload="disappear()">
    <div id="content" style="filter:revealTrans(transition=12, duration=5); position:absolute;
   text-align:center; top:150px; left:93px; height:200px; width:559px">
      <span style='color:cc0099;font-size:30;'>HELLO</span>
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： transition javascript filter firefox function html

相关文章推荐

新的分享

章节导航