动态光源效果,光源跟着鼠标走

最新推荐文章于 2024-03-18 14:43:22 发布

张广森

最新推荐文章于 2024-03-18 14:43:22 发布

阅读量1.1k

点赞数

分类专栏：其他

本文链接：https://blog.csdn.net/fgdfgasd/article/details/8823666

版权

其他专栏收录该内容

19 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE>动态光源效果</TITLE>
<META content="text/html; charset=gb2312" http-equiv=Content-Type>
<STYLE>.shadow {
FILTER: shadow(color=blue,direction=225)
}
.shadow1 {
FILTER: shadow(color=red,direction=225)
}
.shadow2 {
FILTER: shadow(color=gray,direction=225)
}
.div {
CURSOR: move; FILTER: blur(add=ture,direction=135,strength=10); WIDTH: 800px
}
</STYLE>
<META content="MSHTML 5.00.2614.3500" name=GENERATOR></HEAD>
<BODY>
<TABLE border=3 borderColor=#008080 cellSpacing=10
style="COLOR: rgb(0,0,0); LEFT: 20px; POSITION: absolute; TOP: 20px; WIDTH: 100%">
<TBODY>
<TR>
<TD id=flttgt style="FILTER: light(enabled=1),width:300" width=449><IMG
border=0 height=300 src="http://www.jzxue.com/System/uploads/userup/1105/010929494506.jpg" width=400> </TD>
<TD style="VERTICAL-ALIGN: top" width=287><SPAN id=holder
stylefont-size:14ptcolor:yellow?>把鼠标移到图片上，光源会跟踪鼠标。单击图片来加入其他的等观灯光并且他们都会跟随鼠标移动。
</SPAN></TD>
</TR></TBODY></TABLE>
<SCRIPT language=JavaScript>
<!--
var g_numlights=0;
var blurbs= new Array(" 现在的动态滤镜赋予了网页更多的交互性能来响应用户的动作。"," 我们使用了光源滤镜来响应用户的点击。点击图片可以增加光源。"," 通过捕捉用户鼠标位置的方法来移动光源。"," 这里的文本改变是响应单击事件的，并且只需要少量的编程。");
window.οnlοad=setlights;
document.οnclick=keyhandler;
flttgt.οnmοusemοve=mousehandler;
function setlights(){
flttgt.filters[0].clear();
flttgt.filters[0].addcone(0,0,5,100,100,225,225,0,60,15);
if (g_numlights>0){
flttgt.filters[0].addcone(400,170,5,100,100,225,0,0,160,15);
if (g_numlights>1){
flttgt.filters[0].addcone(320,330,5,100,100,0,225,225,60,15);
}
}
}
function keyhandler()
{
g_numlights=(g_numlights+=1)%4;
holder.innerHTML=blurbs[g_numlights];
setlights();
}
function mousehandler()
{
x=(window.event.x-80);
y=(window.event.y-80);
flttgt.filters[0].movelight(1,x,y,5,1);
if(g_numlights>0){
flttgt.filters[0].movelight(1,x,y,5,1);
if(g_numlights>1)
{
flttgt.filters[0].movelight(2,x,y,5,1);
}
}
}
</SCRIPT>
<P><FONT color=#000000> </FONT></P>
<DIV style="POSITION: absolute; TOP: 500px">
<P>　</P>
</DIV>
</BODY></HTML>

张广森

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
动态光源效果,光源跟着鼠标走

动态光源效果.shadow {FILTER: shadow(color=blue,direction=225)}.shadow1 {FILTER: shadow(color=red,direction=225)}.shadow2 {FILTER: shadow(color=gray,direction=225)}.div {CURSOR: move;
复制链接

扫一扫