代码

夜雨千回 · 发表于 2009-10-24 00:25

巧用CSS的RevealTrans滤镜 （冯永曜　2001年04月30日 11:52） 　　CSS的RevealTrans动态滤镜是一个神奇的滤镜，它能产生23种动态效果，更为奇妙的是它还能在23种动态效果中随机抽用其中的一种。用它来进行网页之间的动态切换，简直方便极了，你只要在网页源代码的< head >与< /head >之间插入这样一行代码：< Meta content=revealTrans(Transition=14,Duration=3.0) http-equiv=Page-enter >，当你进入这个页面时，网页将象拉幕一样从中间向两边拉开，是不是别具一格？！ 　　RevealTrans滤镜只有两个参数，Duration：是切换时间，以秒为单位；Transition：是切换方式，它有24种方式，详见下表： <PRE>切换效果 Transition参数值 切换效果 Transition参数值
矩形从大至小 0 随机溶解 12
矩形从小至大 1 从上下向中间展开 13
圆形从大至小 2 从中间向上下展开 14
圆形从小至大 3 从两边向中间展开 15
向上推开 4 从中间向两边展开 16
向下推开 5 从右上向左下展开 17
向右推开 6 从右下向左上展开 18
向左推开 7 从左上向右下展开 19
垂直形百叶窗 8 从左下向右上展开 20
水平形百叶窗 9 随机水平细纹 21
水平棋盘 10 随机垂直细纹 22
垂直棋盘 11 随机选取一种特效 23
</PRE>

夜雨千回 · 发表于 2009-10-24 00:33

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML><HEAD><TITLE>片头文字</TITLE> <META http-equiv=Content-Type content="text/html; charset=gb2312"> <META content="MSHTML 6.00.2900.5726" name=GENERATOR></HEAD>
 <BODY style="POSITION: relative" bgColor=#cfcdc6 background=背景图片 scroll=no>
<STYLE>BODY .img {  BORDER-RIGHT: #6b654b 0px dashed; BORDER-TOP: #6b654b 0px dashed; FILTER: revealtrans glow(strength=8, color=#e4e4de,
enabled=1); LEFT: 0px; VISIBILITY: hidden; BORDER-LEFT: #6b654b 0px dashed; BORDER-BOTTOM: #6b654b 0px dashed; POSITION: absolute; TOP: 0px } .mess {  BORDER-RIGHT: #6b654b 0px dashed; PADDING-RIGHT: 0px; BORDER-TOP: #cc0000 0px dashed; PADDING-LEFT: 0px; FONT-WEIGHT: normal; FONT-SIZE: 12pt; FILTER: revealtrans progid:dXImageTransform.Microsoft.Gradient(endColorstr=#dad9d3, startColorstr=#222222, gradientType=0) glow(strength=8, color=#222222, enabled=1); LEFT: 0px; VISIBILITY: hidden; OVERFLOW: auto; BORDER-LEFT: #6b654b 0px dashed; WIDTH: 600px; COLOR: #f2f1db; SCROLLBAR-ARROW-COLOR: #e9edea; PADDING-TOP: 0px; BORDER-BOTTOM: #6b654b 0px dashed; FONT-FAMILY: Papyrus; SCROLLBAR-BASE-COLOR: #595959; POSITION: absolute; TOP: 0px; HEIGHT: 500px; BACKGROUND-COLOR: #595959; PADDING-: 0px } .knop {  BORDER-RIGHT: #6b654b 1px dashed; BORDER-TOP: #6b654b 1px dashed; FONT-SIZE: 12pt; BACKGROUND: #cccccc; LEFT: 10px; BORDER-LEFT: #6b654b 1px dashed; WIDTH: 115px; CURSOR: hand; COLOR: #000000; BORDER-BOTTOM: #6b654b 1px dashed; FONT-FAMILY: Papyrus; POSITION: absolute; HEIGHT: 35px } A:link {  FONT-SIZE: 11pt; COLOR: #000000; TEXT-DECORATION: underline } A:visited {  FONT-SIZE: 22pt; COLOR: #333333 } A:hover {  COLOR: #6b654b } A:active {  COLOR: #222222 } </STYLE>
<META content="MSHTML 6.00.2900.2963" name=GENERATOR> <BGSOUND balance=0 src="音乐地址" volume=0 loop=99> <BUTTON language=vbscript class=knop id=openBtn style="LEFT: 920px; WIDTH: 60px; POSITION: absolute; TOP: 150px" onclick=showpic1() height:30px>图1</BUTTON> <BUTTON language=vbscript class=knop id=openBtn style="LEFT: 920px; WIDTH: 60px; POSITION: absolute; TOP: 200px" onclick=showpic2() height:30px>图2</BUTTON> <BUTTON language=vbscript class=knop id=openBtn style="LEFT: 920px; WIDTH: 60px; POSITION: absolute; TOP: 250px" onclick=showpic3() height:30px>图3</BUTTON> <BUTTON language=vbscript class=knop id=openBtn style="LEFT: 920px; WIDTH: 60px; POSITION: absolute; TOP: 300px" onclick=showpic4() height:30px>图4</BUTTON> <BUTTON language=vbscript class=knop id=openBtn style="LEFT: 920px; WIDTH: 60px; POSITION: absolute; TOP: 350px" onclick=showpic5() height:30px>图5</BUTTON> <BUTTON language=vbscript class=knop id=openBtn style="LEFT: 920px; WIDTH: 60px; POSITION: absolute; TOP: 400px" onclick=showpic6() height:30px>图6</BUTTON>
<DIV style="Z-INDEX: 1; LEFT: 20px; WIDTH: 650px; POSITION: absolute; TOP: 0px; HEIGHT: 520px"> <IMG class=img id=pic1 src="图片1"> <IMG class=img id=pic2 src="图片2"> <IMG class=img id=pic3 src="图片3"> <IMG class=img id=pic4 src="图片4"> <IMG class=img id=pic5 src="图片5"> <IMG class=img id=pic6 src="图片6"> </DIV> <SCRIPT language=vbscript>   '------------------------------------------ '备注 '------------------------------------------
dim sch, scw
Sub Window_Onload() window.status="  签名  " sch=document.body.clientheight scw=document.body.clientwidth pic1w=700 pic1h=550 pic2w=700 pic2h=550 pic3w=700 pic3h=550 pic4w=700 pic4h=550 pic5w=700 pic5h=550 pic6w=700 pic6h=550
pic1.style.postop=(sch/2.2)-(pic1h/2.2) pic1.style.posleft=(scw/1.5)-(pic1w/1.5) pic2.style.postop=(sch/2.2)-(pic2h/2.2) pic2.style.posleft=(scw/1.5)-(pic2w/1.5) pic3.style.postop=(sch/2.2)-(pic3h/2.2) pic3.style.posleft=(scw/1.5)-(pic3w/1.5) pic4.style.postop=(sch/2.2)-(pic4h/2.2) pic4.style.posleft=(scw/1.5)-(pic4w/1.5) pic5.style.postop=(sch/2.2)-(pic5h/2.2) pic5.style.posleft=(scw/1.5)-(pic5w/1.5) pic6.style.postop=(sch/2.2)-(pic5h/2.2) pic6.style.posleft=(scw/1.5)-(pic5w/1.5)
End Sub
Sub showpic1() pic1.filters(0).Apply() pic1.filters(0).transition=1 pic1.style.visibility="visible" pic1.filters(0).Play(3.000) pic2.style.visibility="hidden" pic3.style.visibility="hidden" pic4.style.visibility="hidden" pic5.style.visibility="hidden" pic6.style.visibility="hidden"
End Sub
Sub showtext() text.filters(0).Apply() text.filters(0).transition=8 text.style.visibility="visible" text.filters(0).Play(3.000) pic1.style.visibility="hidden" pic2.style.visibility="hidden" pic3.style.visibility="hidden" pic4.style.visibility="hidden" pic5.style.visibility="hidden" pic6.style.visibility="hidden"
End Sub
Sub showpic2() pic1.style.visibility="hidden" pic2.filters(0).Apply() pic2.filters(0).transition=9 pic2.style.visibility="visible" pic2.filters(0).Play(3.000) pic3.style.visibility="hidden" pic4.style.visibility="hidden" pic5.style.visibility="hidden" pic6.style.visibility="hidden"
End Sub
Sub showpic3() pic1.style.visibility="hidden" pic2.style.visibility="hidden" pic3.filters(0).Apply() pic3.filters(0).transition=3 pic3.style.visibility="visible" pic3.filters(0).Play(3.000) pic4.style.visibility="hidden" pic5.style.visibility="hidden" pic6.style.visibility="hidden"
End Sub
Sub showpic4() pic1.style.visibility="hidden" pic2.style.visibility="hidden" pic3.style.visibility="hidden" pic4.filters(0).Apply() pic4.filters(0).transition=14 pic4.style.visibility="visible" pic4.filters(0).Play(3.000) pic5.style.visibility="hidden" pic6.style.visibility="hidden"
End Sub
Sub showpic5() pic1.style.visibility="hidden" pic2.style.visibility="hidden" pic3.style.visibility="hidden" pic4.style.visibility="hidden" pic5.filters(0).Apply() pic5.filters(0).transition=6 pic5.style.visibility="visible" pic5.filters(0).Play(3.000) pic6.style.visibility="hidden"
End Sub
Sub showpic6() pic1.style.visibility="hidden" pic2.style.visibility="hidden" pic3.style.visibility="hidden" pic4.style.visibility="hidden" pic5.style.visibility="hidden" pic6.filters(0).Apply() pic6.filters(0).transition=8 pic6.style.visibility="visible" pic6.filters(0).Play(3.000)
 End Sub
Sub showpic7() pic1.style.visibility="hidden" pic2.style.visibility="hidden" pic3.style.visibility="hidden" pic4.style.visibility="hidden" pic5.style.visibility="hidden" pic6.style.visibility="hidden"
End Sub
Sub showpic8() pic1.style.visibility="hidden" pic2.style.visibility="hidden" pic3.style.visibility="hidden" pic4.style.visibility="hidden" pic5.style.visibility="hidden" pic6.style.visibility="hidden"
End Sub
Sub showpic9() pic1.style.visibility="hidden" pic2.style.visibility="hidden" pic3.style.visibility="hidden" pic4.style.visibility="hidden" pic5.style.visibility="hidden" pic6.style.visibility="hidden"
End Sub Sub Window_onresize() window_onload End Sub </SCRIPT> </BODY></HTML>

		自动登录	找回密码
密码			注册