添加收藏
 系统管理
 联系方式
  汉南在线网页设计HTML/CSS

XML超酷效果-固定漂浮页面
作  者:汉南居士
关键字:XML



脚本说明:
 
把如下代码加入<body>区域中
 <XML:namespace prefix="t"/>
<STYLE TYPE="text/css">
.time { BEHAVIOR: url(#DEFAULT#TIME2)}
t\:* { BEHAVIOR: url(#DEFAULT#TIME2)}
BODY { margin:0; font-family:verdana}
.viewbox { position:absolute; width:155; height: 130; top:0; left:0; background:#000000; border:1px solid #000000; overflow:hidden; text-align:center; padding:10; background-image: url(../Graphics Files/bgclockgray.gif); z-index:0}
.colorbox { position:absolute; width:155; height: 130; top:0; left:0; background:green; overflow:hidden; text-align:center; padding:10; z-index:1; filter: alpha(opacity=20);}
.topbox { position:absolute; width:155; height: 130; top:0; left:0; overflow:hidden; text-align:center; padding-top:35; z-index:5;}
.letter { font-size:20; font-weight:bold; color:white; display:none }
.posab {position:absolute;}
</STYLE>
<DIV class="viewbox">
<DIV ID="bar1" STYLE="background:white; position:absolute; top:10; left:160; filter: alpha(opacity=20); height:45px; width:155px; z-index:1"></DIV>
<DIV ID="bar2" STYLE="background:white; position:absolute; top:25; left:-155; filter: alpha(opacity=30); height:65px; width:155px; z-index:1"></DIV>
<DIV ID="bar3" STYLE="background:white; position:absolute; top:75; left:160; filter: alpha(opacity=40); height:35px; width:155px; z-index:1"></DIV>
<DIV ID="bar4" STYLE="background:white; position:absolute; top:-130; left:30; filter: alpha(opacity=10); height:130px; width:45px; z-index:1"></DIV>
<DIV ID="bar5" STYLE="background:white; position:absolute; top:130; left:80; filter: alpha(opacity=10); height:130px; width:65px; z-index:1"></DIV>

</DIV>
<DIV ID="colorbox" class="colorbox"></DIV>
<DIV ID="topbox" class="topbox">
<IMG ID="n5" SRC="photo/200208271.gif" STYLE="filter: alpha(opacity=100); display:none; z-index:3">
<IMG ID="n4" SRC="photo/200208271.gif" STYLE="filter: alpha(opacity=100); display:none; z-index:3">
<IMG ID="n3" SRC="photo/200208271.gif" STYLE="filter: alpha(opacity=100); display:none; z-index:3">
<IMG ID="n2" SRC="photo/200208271.gif" STYLE="filter: alpha(opacity=100); display:none; z-index:3">
<IMG ID="n1" SRC="photo/200208271.gif" STYLE="filter: alpha(opacity=100); display:none; z-index:3">


<DIV ID="htmltime" class="letter" STYLE="position:absolute; top:25; left:14; filter: alpha(opacity=0);  z-index:3; font-size:32pt; ">素材</DIV>

<DIV ID="htmltime4" class="letter" STYLE="  z-index:2; color:black; position:absolute; top:24; left:-1; width:155px; filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=2, MakeShadow=true, ShadowOpacity=.80) z-index:2; font-size:32pt; ">素材</DIV>

<DIV ID="htmltime3" class="letter" STYLE="z-index:2; color:black; position:absolute; top:24; left:0; width:155px; filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=2, MakeShadow=true, ShadowOpacity=.80)">
<DIV STYLE="font-size:10pt">欢迎访问</DIV>
软件咨询 </DIV>

<DIV ID="htmltime2" class="letter" STYLE="position:absolute; top:26; left:8; filter: alpha(opacity=0);  z-index:3; ">
<DIV STYLE="font-size:10pt">欢迎访问</DIV>
软件咨询 </DIV>

</DIV>

<!-- Animation -->

<t:par  begin=".5"  repeatcount="indefinite">

<!-- H -->
<t:set  targetElement="n5" attributeName="display" to="block" begin="0" />
<t:animate  targetElement="n5" attributeName="width" from="100" to="50" begin="0" dur=".5" />
<t:animate  targetElement="n5" attributeName="filters.item(0).opacity" from="100" to="00" begin=".4" dur=".1" />
<t:set  targetElement="n5" attributeName="filters.item(0).opacity" to="00" begin=".5" />
<t:set  targetElement="n5" attributeName="display" to="none" begin=".5" />
<!-- T -->
<t:set  targetElement="n4" attributeName="display" to="block" begin=".5" />
<t:animate  targetElement="n4" attributeName="width" from="100" to="50" begin=".5" dur=".5" />
<t:animate  targetElement="n4" attributeName="filters.item(0).opacity" from="100" to="00" begin=".9" dur=".1" />
<t:set  targetElement="n4" attributeName="filters.item(0).opacity" to="00" begin="1" />
<t:set  targetElement="n4" attributeName="display" to="none" begin="1" />
<!-- M -->
<t:set  targetElement="n3" attributeName="display" to="block" begin="1" />
<t:animate  targetElement="n3" attributeName="width" from="100" to="50" begin="1" dur=".5" />
<t:animate  targetElement="n3" attributeName="filters.item(0).opacity" from="100" to="00" begin="1.4" dur=".1" />
<t:set  targetElement="n3" attributeName="filters.item(0).opacity" to="00" begin="1.5" />
<t:set  targetElement="n3" attributeName="display" to="none" begin="1.5" />
<!-- L -->
<t:set  targetElement="n2" attributeName="display" to="block" begin="1.5" />
<t:animate  targetElement="n2" attributeName="width" from="100" to="50" begin="1.5" dur=".5" />
<t:animate  targetElement="n2" attributeName="filters.item(0).opacity" from="100" to="00" begin="1.9" dur=".1" />
<t:set  targetElement="n2" attributeName="filters.item(0).opacity" to="00" begin="2" />
<t:set  targetElement="n2" attributeName="display" to="none" begin="2" />
<!-- + -->
<t:set  targetElement="n1" attributeName="display" to="block" begin="2" />
<t:animate  targetElement="n1" attributeName="width" from="100" to="50" begin="2" dur="1" />
<t:animate  targetElement="n1" attributeName="filters.item(0).opacity" from="100" to="00" begin="2.5" dur=".5" />
<t:set  targetElement="n1" attributeName="filters.item(0).opacity" to="00" begin="3" />
<t:set  targetElement="n1" attributeName="display" to="none" begin="3" />
<!-- TIME -->
<t:set  targetElement="htmltime" attributeName="display" to="block" begin="3" />
<t:animate  targetElement="htmltime" attributeName="filters.item(0).opacity" from="00" to="100" begin="3" dur="1" />
<t:set  targetElement="htmltime" attributeName="filters.item(0).opacity" to="100" begin="4" />
<t:set  targetElement="htmltime" attributeName="display" to="none" begin="4.75" />


<t:set  targetElement="htmltime2" attributeName="display" to="block" begin="5" />
<t:animate  targetElement="htmltime2" attributeName="filters.item(0).opacity" from="00" to="100" begin="5" dur="1" />
<t:set  targetElement="htmltime2" attributeName="filters.item(0).opacity" to="100" begin="5" />

<t:set  targetElement="htmltime3" attributeName="display" to="block" begin="5" />
<t:animate  targetElement="htmltime3" attributeName="filters.item(0).ShadowOpacity" from="00" to="100" begin="5" dur="1" />
<t:set  targetElement="htmltime3" attributeName="filters.item(0).shadowOpacity" to="100" begin="5" />
</t:par>
<!-- Bar 1 -->
<t:par  begin="0" repeatcount="indefinite">
<t:animate  targetElement="bar1" attributeName="left" from="160" to="-200" begin="2" dur="8" />
<t:animate  targetElement="bar2" attributeName="left" from="-200" to="160" begin="4" dur="8" />
<t:animate  targetElement="bar3" attributeName="left" from="160" to="-200" begin="6" dur="8" />
<t:animate  targetElement="bar4" attributeName="top" from="-130" to="200" begin="0" dur="6" />
<t:animate  targetElement="bar5" attributeName="top" from="130" to="-200" begin="4" dur="8" />
</t:par>
</t:par>
<!--colorbackground-->
<t:par  begin="0" repeatcount="indefinite" >
<t:animatecolor  targetElement="colorbox" attributeName="backgroundColor" values="blue;green;red;yellow" begin="0" dur="10" autoreverse="true"/>
</t:par>



来源:互联网
阅读:69
日期:2007-9-20

【 双击滚屏 】 【 推荐朋友 】 【 收藏 】 【 打印 】 【 关闭 】 【 字体: 】 
上一篇:左右浮动小精灵(左右对联广告)
下一篇:网页上内容导出到word

  >> 相关文章
  没有相关文章。

5.12汶川大地震遇难同胞默哀 | 汉南在线总站 | 网站建设 | BT电影下载 | 汉南在线博客 | 流行购商城

授权使用:汉南在线 http://hnzx.hzwz.net/
经营许可证:陕ICP备05000109号 Powered by:汉南在线  
Copyright (c) 2002-2008 汉南在线. All Rights Reserved .