操作系统 程序设计 图形图像 媒体动画 机械电子 WEB开发 数据库 办公软件 路由技术 网络原理 网络架设 网络管理 认证培训
您的位置:计算机资讯网 >> WEB开发 >> HTML >> CSS教程 -> CSS+VBScript制作的酷酷光照效果
CSS+VBScript制作的酷酷光照效果
2004-10-14 10:43:32


<html>
<head>
<title>Untitled</title>
</head>

<body bgcolor="Black">

<div id="myLightObject" style="position: relative; height: 400px; width: 400px; top: 10px; left: 0px;
color: White; filter: light">
<center>
黑夜给了我一双眼睛,<br>
而我却用它来寻找光明,<br>
园林晴昼春谁主<br>
暖律潜催,幽谷暄和,黄鹂翩翩,乍迁芳树
<p>
春花秋月何时了,往事知多少<br>
小楼昨夜又东风<br>
故国不堪回首月明中。<br>
雕栏玉砌应犹在,只是朱颜改。
</p>
<p>
问君能有几多愁,<br>
恰似一江春水向东流。<br>
CSS滤镜与VBScript结合运用的效果<br>
利用CSS的Light滤镜模拟移动的光锥<br>
</p>
用VBScript捕捉鼠标的移动,令光锥射向也跟着移动

</center>
</div>

<script language="VBScript">
Option Explicit
sub window_OnLoad()
call myLightObject.filters.light(0).addambient(0,0,255,30)
call myLightObject.filters.light(0).addcone(400,400,200,100,100,200,204,200,80,10)
end sub

sub document_onMouseMove()
call myLightObject.filters.light(0).MoveLight(1,window.event.x,window.event.y,0,1)
end sub

</script>

</body>
</html>
</td>
</tr>
</table>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="1" bgcolor="cccccc"><img src="/img/blank.gif" width="1" height="1"></td>
</tr>
<tr>
<td height="30" bgcolor="#F6F6F6"> <img src="/img/rtg_btn_print.gif" width="16" height="15">
<a href="javascript:window.print();">打印本文</a> | <img src="/img/feedback.gif" width="13" height="12"><a href="/sendmail.asp?id=1711">
推荐朋友</a> | <img src="/img/rtg_btn_save.gif" width="17" height="16" align="absmiddle">
<a href="javascript:OnSave();">收藏文章</a> | <img src="/img/windows_close.gif" width="12" height="12">
<a href="javascript:window.close()">关闭窗口</a></td>
</tr>
</table></td>
<td width="3"> </td>
</tr>
</table>
<table width="766" border="0" align="center" cellpadding="0" cellspacing="0" background="/img/page-bg.gif" bgcolor="#FFFFFF">
<tr>
<td height="30"> </td>
<td rowspan="2" align="center" valign="top"><br><SCRIPT language=JavaScript>showbanner(5,5);</SCRIPT><br>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="25"> <strong>相关文章</strong></td>
</tr>
<tr>
<td height="1" bgcolor="cccccc"><img src="/img/blank.gif" width="1" height="1"></td>
</tr>
<tr>
<td class="title-list"><img src=http://www.computernews.com.cn/techimages/2004101410/about_no.gif width=7 height=7> <A href=/article/20010328/200103281478.shtml>网页中轻松实现三维字体<SPAN class=aritcle-date> (2001年3月28日)</SPAN></A><br/><br/><img src=http://www.computernews.com.cn/techimages/2004101410/about_no.gif width=7 height=7> <A href=/article/20010113/200101131206.shtml>Dreamweaver4中CSS的定义<SPAN class=aritcle-date> (2001年1月13日)</SPAN></A><br/><br/><img src=http://www.computernews.com.cn/techimages/2004101410/about_no.gif width=7 height=7> <A href=/article/20010111/200101111182.shtml>CSS2参考之十一<SPAN class=aritcle-date> (2001年1月11日)</SPAN></A><br/><br/><img src=http://www.computernews.com.cn/techimages/2004101410/about_no.gif width=7 height=7> <A href=/article/20010111/200101111181.shtml>CSS2参考之十<SPAN class=aritcle-date> (2001年1月11日)</SPAN></A><br/><br/><img src=http://www.computernews.com.cn/techimages/2004101410/about_no.gif width=7 height=7> <A href=/article/20010111/200101111180.shtml>CSS2参考之九<SPAN class=aritcle-date> (2001年1月11日)</SPAN></A><br/><br/><img src=http://www.computernews.com.cn/techimages/2004101410/about_no.gif width=7 height=7> <A href=/article/20010111/200101111179.shtml>CSS2参考之八<SPAN class=aritcle-date> (2001年1月11日)</SPAN></A><br/><br/><img src=http://www.computernews.com.cn/techimages/2004101410/about_no.gif width=7 height=7> <A href=/article/20010111/200101111178.shtml>CSS2参考之七<SPAN class=aritcle-date> (2001年1月11日)</SPAN></A><br/><br/><img src=http://www.computernews.com.cn/techimages/2004101410/about_no.gif width=7 height=7> <A href=/article/20010111/200101111177.shtml>CSS2参考之六<SPAN class=aritcle-date> (2001年1月11日)</SPAN></A><br/><br/> </td>
</tr>
</table></td>
<td width="1" rowspan="3" bgcolor="#CCCCCC"></td>
<td width="149" rowspan="3" valign="top" bgcolor="#F6F6F6"> <p></p></td>
<td> </td>
</tr>
<tr>
<td width="3"></td>
<td width="3"> </td>
</tr>
</table>
<table width="766" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><img src="/img/bottom_gb_3.gif" width="766" height="21"></td>
</tr>
</table>
</body>
</html>

转自:不详 作者:未知 关闭
加入收藏 推荐给好友 打印本文
内容为网上收集,并不代表本站同意或者赞同其观点,如果有任何版权,内容问题,请联系本站,我们将在第一时间处理.
查询
关键字
搜索范围
热点专题
服务
计算机资讯网 | 联系方式 | 广告服务 | 意见留言 | 友情链接 | 网站地图 | 设为首页