您当前的位置是:首页-CSS+DIV教程

Blentrans属性--文字图片逐渐淡出的多媒体效果

【发表于】:2011/5/17 23:31:00  已被访问:202次
Blentrans属性

 上面的例子的源代码如下所示:

  <html>
  <head>
  <title> dhtml</title>
  <style>
  <!--
  em{color:red;cursor:hand;font-size:14pt}
  -->
  </style> </head>
  <body>
  <h1>滤镜效果</h1>
  <p><strong>使用方法</strong>
  <span id="text4" onclick="curobj=inner3;togglemultimedia()">
  请单击<b><em style="color:red">这里</em></b>使文字淡出,
  再次单击后可以使文字逐渐出现。</p>
  <div id="inner3" style="width:100%;color:red;             
  filter:blendtrans(duration=3)">
  <p> 我们为这段文字加上的逐渐淡出的多媒体效果。</span></p> </div>
  <script language="Javascript">
  <!--
  var curobj;
  function togglemultimedia(){
  if (curobj.filters(0).status==2){ curobj.filters(0).stop();
  if (curobj.style.visibility=="hidden")
  curobj.style.visibility="visible";
  else curobj.style.visibility="hidden";                 
  window.settimeout("togglemultimedia()",1); }
  curobj.filters(0).apply();
  if (curobj.style.visibility=="hidden")                 
  curobj.style.visibility="visible";
  else curobj.style.visibility="hidden"; curobj.filters(0).play(); }
  -->
  </script> </body>
  </html>

  除了文字外,图片是不是也能实现这种混合效果呢?答案是肯定的。

 
上下篇: CSS+jS实例:显示和隐藏 图片 菜鸟运用CSS改进网站设计的3个技巧

最新推荐信息