77、变化文字的说明条

77、变化文字的说明条

脚本说明:

把如下代码加入<body>区域中:

<html xmlns:t ="urn:schemas-microsoft-com:time" >

IMPORT namespace="t" implementation="#default#time2">

<style>

 .incr { padding:10px;

              position:absolute;

               top:0;

               left:0;

              background:yellowgreen;

               width:100%;

               height:143px;

               filter:progid:DXImageTransform.Microsoft.Alpha(opacity='0');}

BUTTON { position:relative; top:800;  border:1px solid black; }

</style>

<!-- START OF SECTION ONE, CONTENT FOR THE BANNER ROTATION -->

<div id="oContain" style="position:absolute; top:10; left:-800; width:500; height: 143px; border:1px solid black; overflow:hidden">

<span id="oBox1" class="incr" style="background:gold;" >

<h1>第一页</h1>

</span>

<span id="oBox2" class="incr" style="background:tomato;">

<h1>第二页</h1>

</span>

<span id="oBox3" class="incr" style="background:yellowgreen;">

<h1>第三页</h1>

</span>

<span id="oBox4" class="incr" style="background:#3366CC;">

<h1>第四页</h1>

</span>

</div>

<!-- END OF SECTION ONE, CONTENT FOR THE BANNER ROTATION -->

 

<!-- START OF SECTION TWO, ANIMATION FOR PAGE INITIALISATION -->

<t:animate

       id="slideIn"

       targetElement="oContain"

       attributeName="left"

       begin="0"

       calcMode="spline"

       keySplines=" 0 .75 .25 1"

       keyTimes="0;1 "

       values = "-800;10"

       dur = "1"

       fill="freeze"

/>

<!-- END OF SECTION TWO, ANIMATION FOR PAGE INITIALISATION -->

 

<!-- START OF SECTION THREE, ANIMATION FOR BANNER ROTATION -->

<t:seq id="timeline1" repeatCount="indefinite" begin="slideIn.end">

       <t:animate

              id="fade1"

              targetElement="oBox1"

              attributeName="filters.item(0).opacity"

              values = "0;100;10"

              dur = "5"

       />

 

       <t:animate

              id="fade2"

              targetElement="oBox2"

              attributeName="filters.item(0).opacity"

              values = "0;100;10"

              dur = "5"

       />

 

       <t:animate

              id="fade3"

              targetElement="oBox3"

              attributeName="filters.item(0).opacity"

              values = "0;100;10"

              dur = "5"

       />

 

       <t:animate

              id="fade4"

              targetElement="oBox4"

              attributeName="filters.item(0).opacity"

              values = "0;100;10"

              dur = "5"

       />

</t:seq>

<!-- END OF SECTION THREE, ANIMATION FOR BANNER ROTATION -->

 

 

 

Write a comment

Comments: 0