`

巧用CSS的RevealTrans滤镜 动画切换效果

阅读更多

 
 CSS的RevealTrans动态滤镜是一个神奇的滤镜,它能产生23种动态效果,更为奇妙的是它还能在23种动态效果中随机抽用其中的一种。用它来进行网页之间的动态切换,其它的非IE浏览器虽然不支持这个滤镜,但是支持透明滤镜的

 

以下实例 同时支持IE和FF


示例:

 
<html>
<head>
<title>政策法规</title>
<LINK href="style.css" type=text/css rel=stylesheet>
</head>
<body background=/Templets/images/zcwd_policy.gif onload="playAd()">
 <table width=453 border=0 cellspacing=3 cellpadding=0>
  <tr>
   <td id=divText style="filter:revealTrans(Transition=23,Duration=2)"></td>
  </tr>
 </table>
 
 
 <div id="content_0" style="display:none">
  <TABLE cellSpacing=0 cellPadding=0 width=560 align=center border=0 >
   <TBODY>
    <TR>
     <TD width=31 height=29>
      <IMG height=20 src="/Templets/images/zcwd_5.gif" width=21>
     </TD>
     <TD width=529>
      问:如何现金提取市区城镇职工医疗保险医疗费综合减负金额?
     </TD>
    </TR>
    <TR>
     <TD background=/Templets/images/line_2.gif colSpan=2 height=1></TD>
    </TR>
    <tr><td height=10></td></tr>
    <TR>
     <TD>
      <IMG height=20 src="/Templets/images/zcwd_6.gif" width=21>
     </TD>
     
     <TD class=news>
      <DIV>&nbsp;&nbsp;&nbsp; (一)在保人员提取减负金额程序</DIV>
<DIV>&nbsp;&nbsp;&nbsp; 需要提取综合减负金额的参保人员,可到工商银行各营业网点(宁波大市范围内,下同)办理登记手续。办理登...&nbsp;&nbsp;<SPAN class=red><a href="/Html/pol_zcwd/2010-07/02/1014596539044261100702141059.html" target="_blank">&gt;&gt;详细内容</a></SPAN>
      
     </TD>
    </TR>
   </TBODY>
  </TABLE>
 </div>
 
 <div id="content_1" style="display:none">
  <TABLE cellSpacing=0 cellPadding=0 width=560 align=center border=0 >
   <TBODY>
    <TR>
     <TD width=31 height=29>
      <IMG height=20 src="/Templets/images/zcwd_5.gif" width=21>
     </TD>
     <TD width=529>
      问:市区城镇职工医疗保险医疗费综合减负每年什么时候划入个人历年账户?
     </TD>
    </TR>
    <TR>
     <TD background=/Templets/images/line_2.gif colSpan=2 height=1></TD>
    </TR>
    <tr><td height=10></td></tr>
    <TR>
     <TD>
      <IMG height=20 src="/Templets/images/zcwd_6.gif" width=21>
     </TD>
     
     <TD class=news>
      <DIV>&nbsp;&nbsp;&nbsp; 市级医保经办机构于每年7月1日将综合减负金额划入综合减负人员的历年个人账户。2008医保年度未申报提取的综合减负金额于2010年7月1日统一划入参保人员的历年个人账户。</DIV>
<DIV...&nbsp;&nbsp;<SPAN class=red><a href="/Html/pol_zcwd/2010-07/02/101437729137574020710143710.html" target="_blank">&gt;&gt;详细内容</a></SPAN>
      
     </TD>
    </TR>
   </TBODY>
  </TABLE>
 </div>
 
 <div id="content_2" style="display:none">
  <TABLE cellSpacing=0 cellPadding=0 width=560 align=center border=0 >
   <TBODY>
    <TR>
     <TD width=31 height=29>
      <IMG height=20 src="/Templets/images/zcwd_5.gif" width=21>
     </TD>
     <TD width=529>
      问:如何查询是否符合市区城镇职工医疗保险医疗费综合减负的条件?
     </TD>
    </TR>
    <TR>
     <TD background=/Templets/images/line_2.gif colSpan=2 height=1></TD>
    </TR>
    <tr><td height=10></td></tr>
    <TR>
     <TD>
      <IMG height=20 src="/Templets/images/zcwd_6.gif" width=21>
     </TD>
     
     <TD class=news>
      <DIV>&nbsp;&nbsp;&nbsp; 市劳动保障部门在每个医保年度结束后对医疗费用进行统算、审核,确定上年度符合条件的综合减负对象。参保人员可于每年7月1日起查询是否属于综合减负对象,查询渠道如下:</DIV>
<DIV>&nb...&nbsp;&nbsp;<SPAN class=red><a href="/Html/pol_zcwd/2010-07/02/1014255227125030100702101425.html" target="_blank">&gt;&gt;详细内容</a></SPAN>
      
     </TD>
    </TR>
   </TBODY>
  </TABLE>
 </div>
 
 <div id="content_3" style="display:none">
  <TABLE cellSpacing=0 cellPadding=0 width=560 align=center border=0 >
   <TBODY>
    <TR>
     <TD width=31 height=29>
      <IMG height=20 src="/Templets/images/zcwd_5.gif" width=21>
     </TD>
     <TD width=529>
      问:哪些人符合市区城镇职工医疗保险医疗费综合减负的条件?
     </TD>
    </TR>
    <TR>
     <TD background=/Templets/images/line_2.gif colSpan=2 height=1></TD>
    </TR>
    <tr><td height=10></td></tr>
    <TR>
     <TD>
      <IMG height=20 src="/Templets/images/zcwd_6.gif" width=21>
     </TD>
     
     <TD class=news>
      <DIV>&nbsp;&nbsp;&nbsp; 市区城镇职工基本医疗保险、住院医疗保险和外来务工人员大病保险参保人员在医保年度(当年5月1日至次年4月30日)内,门诊、特殊病种和住院治疗(包括应急记账、院外检查治疗、处方购药)发生的并在该医...&nbsp;&nbsp;<SPAN class=red><a href="/Html/pol_zcwd/2010-07/02/1014102406371449101410100702.html" target="_blank">&gt;&gt;详细内容</a></SPAN>
      
     </TD>
    </TR>
   </TBODY>
  </TABLE>
 </div>
 
 <script language="JavaScript">
Text = new Array();
 
 Text[0]=document.all['content_0'].innerHTML;
 
 Text[1]=document.all['content_1'].innerHTML;
 
 Text[2]=document.all['content_2'].innerHTML;
 
 Text[3]=document.all['content_3'].innerHTML;
 
if(Text.length==0){
  Text[0]="没有数据";
  Text[1]="请先录入";
}
var IDX= -1;
function playAd() {
 if (IDX==Text.length-1) {
  IDX=0;
 } else {
  IDX++;
 }
 var prefix = "";
 var divTextV = document.getElementById("divText");
 if(navigator.userAgent.indexOf("MSIE")>0)
 {
 divTextV.style.filter="revealTrans(Transition="+Math.floor(Math.random()*23+1)+",Duration=2)";
 divTextV.filters[0].apply();
 divTextV.innerHTML = prefix + Text[IDX];
 divTextV.filters[0].play();
 }else{
 divTextV.innerHTML = prefix + Text[IDX];
 }
}
 setInterval("playAd()",6000);
</script>
</body>
</html>

 

分享到:
评论

相关推荐

    网页制作滤镜代码文档

    在这个文档中,我们将深入探讨如何利用RevealTrans滤镜来制作文字切换效果。 首先,理解RevealTrans滤镜。这是一个用于HTML元素的CSS滤镜,它可以创建各种过渡效果,如滑动、溶解等,使得元素在页面上的显示方式...

    巧用CSS滤镜制作绚丽图片播放效果

    本文将重点讲解如何利用CSS中的`revealTrans`滤镜来制作一个超炫的图片播放效果,同时确保每张图片都有自己的链接地址,使得用户点击图片时能够跳转到不同的页面。 首先,`revealTrans`滤镜是CSS1中的一个特性,它...

    js实现随即图片切换效果

    ### JavaScript 实现随机图片切换效果 #### 知识点概览 本文将详细介绍如何使用JavaScript实现随机图片切换的效果。此效果常用于网站轮播图、广告位更换等场景,能够增强用户交互体验并提高页面活跃度。具体涉及的...

    js带前后翻页的图片切换效果代码分享

    同时,由于CSS滤镜主要在旧版的IE浏览器中支持,现代浏览器可能需要其他方法来实现平滑的图片切换效果,例如使用CSS3的过渡(Transitions)或动画(Animations)。 总结来说,通过使用JavaScript,我们可以实现带有...

    图片之间的切换

    `playTran()`函数是用于启动图片过渡效果的,如果浏览器支持滤镜(如IE),它会调用图片的`filters.revealTrans.play()`方法来播放过渡动画。 `nextAd()`函数是图片切换的核心,它会递增`adNum`的值,实现向后切换...

    被忽视的META标签之特效(页面过渡效果)

    其中,`blendTrans`是一个CSS动态滤镜,它可以创建渐变效果,使得页面元素在切换时逐渐显现或消失。使用方法如下: ```html (Duration=0.5)"&gt; (Duration=0.5)"&gt; ``` 这里的`Duration`参数指定了特效的持续时间,...

    js实现的层变换效果

    这段代码负责在指定的时间间隔内切换`div`元素内的内容,并触发滤镜效果,从而实现平滑的过渡动画。 ```javascript var temp = 1; function playIt() { var div1 = document.getElementById("div1"); div1....

    js实现图片和链接文字同步切换特效的方法

    - imgInit.filters.revealTrans.play():这里使用了IE特有的滤镜效果(revealTrans),用于创建图片切换时的淡入淡出效果。 - setTimeout函数:用于设置定时器,每隔3秒执行一次nextAd函数,实现图片的自动轮换。 4...

    表格轮换显示 强

    这里,`FILTER` 属性是针对IE浏览器的一个滤镜效果,`revealTrans` 是一种过渡效果,`transition=13` 表示使用第13种过渡效果,通常是一些预设的动画效果,比如淡入淡出等。`duration=1` 指定了过渡效果的持续时间,...

    网页特效从下往上过渡 共享图库_最新图片

    总的来说,“从下往上过渡”的网页特效利用了CSS的滤镜和JavaScript(可能还包括jQuery或其他库)来实现动态的图片切换效果。这种特效不仅提升了网页的视觉吸引力,也为用户提供了更直观、有趣的交互体验。在实际...

Global site tag (gtag.js) - Google Analytics