您在本站的位置:主 页 >> 站长专区 >> 站长作品:《网页特效 3 例》
《学生电脑》杂志 2002 年第 3 期】               网页特效 3 例
    一、仿 TV 半透明上滚字幕
    以下脚本实现了半透明的上滚字幕效果,就像电视节目片头或片尾的演职员表。其中滚动字幕用〈marquee〉标签实现,文字滚动方向由 direction 参数控制(参数值为 Up,Down,Left,Right),滚动速度由 scrollAmount 参数控制(数值越大滚动越快)。字幕的背景颜色由 background-color 参数控制,透明度由 filter:alpha(Opacity=85) 语句中的 Opacity 参数控制。 <html> <head><title>仿 TV 半透明上滚字幕</title> <style type="text/css"> <!-- body {font-size=9pt;} td {font-size=9pt;} --> </style> </head> <body bgcolor=azure> <div style="position:absolute; width:240px; height:200px; visibility:show; z-index:1; left:80px; top:30px; background-color:lightyellow; filter:alpha(Opacity=85)"> <table border=1 background="bg_line.gif"> <tr> <td width=240> <marquee style="height:200px; text-align:center; left:0px; top:1px; color:red; margin-left:1" direction=up scrollAmount=1 behavior=loop> 网站建设:网 e 工作室<br><br> 网页制作:张庆 zhangking@263.net<br><br> 时 间:二○○一年十月十二日 </marquee> </td> </tr> </table> </div> <!-以下JavaScript脚本产生若干行文字,使字幕效果看起来更明显:--> <Script Language='JavaScript'> for(i=0;i<=10;i++) document.write('&nbsp;&nbsp;网站建设:网 e 工作室 &nbsp;&nbsp;二○○一年十月十二日<br>'); </Script> </body> </html>
    二、图片显示特效    【演 示】
    把以下代码放在网页〈Body〉标签的任意地方,然后拷贝一幅图片,把〈Img〉标签 Src=myimage.gif 语句中的 myimage.gif 改为你的图片的名称。当打开该网页时,你的图片就会产生特殊的显示效果。更改脚本 image1.filters.item(0).transition = 1 语句中等号后的值(0 到 23),会得到各种不同的效果。赶快试试吧! <Img Src=myimage.gif id=image1 Style="visibility:hidden; FILTER:revealTrans(Duration=4.0, Transition=23);"> <Script For=window Event=onLoad Language=VbScript> image1.filters.item(0).apply() image1.filters.item(0).transition = 1 '取值:0-23 image1.Style.visibility = "" image1.filters(0).play(1) </Script>
    三、浏览器“地震”    【演 示】
    浏览器也能发生“地震”!如果你不信的话,请把以下脚本放在你的网页中,用 IE 浏览器打开网页,然后点击按钮“地震啦!”,你的浏览器就会像触电一样抖动起来。调节 onclick="shake(3)" 一句的数字,可以改变“地震”的时间长短。 <Script Language="JavaScript"> <!-- function shake(n) { if (window.top.moveBy) { for (i = 10; i > 0; i--) { for (j = n; j > 0; j--) { window.top.moveBy(0,i); window.top.moveBy(i,0); window.top.moveBy(0,-i); window.top.moveBy(-i,0); } } } } //--> </Script> <Form> <input onclick="shake(3)" type="button" value="地震啦!"> </Form>
    注意:以上例子在 IE4.0 以上浏览器中实现。
    ---------------------------------------------
    张庆 zhangking@263.net 029-5368050
    http://100000.home.sohu.com QQ:9365822
        2002.1.10
返回“站长专区”
Copyright(C) By ZhangQing 张庆 返回主页
站长邮箱:zhangking@263.net  Bp:029-95808 呼 822686