变化文字的说明条-JS特效-爱易网页

变化文字的说明条

日期：2014-05-18　浏览次数：20537 次

欢迎光临爱易网网页脚本特效中心，点击运行按钮演示特效：

以下是程序代码

脚本说明:
把如下代码加入<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>

<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>

<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"
/>

<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>

<a href="http://www.aiyiweb.com/js/">欢迎访问爱易网JS特效</a>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

变化文字的说明条

相关资料更多>

推荐阅读更多>