动态的光照特效JS代码，四种光效反复循环

发布时间：2018-08-18 05:39:57 所属栏目：运营来源：站长网

导读：动态的光照特效， Java Script代码，请在图上单击鼠标，使用了光效滤镜。每次在图上单击鼠标,就会加一种光效，移动鼠标，光柱还能跟随变动，浏览器要求为IE4.0以上。具备四种光效反复循环等。演示代码： HTMLHEADTITLEDynamic Lighting Effects with DHTM

　　动态的光照特效，JavaScript代码，请在图上单击鼠标，使用了光效滤镜。每次在图上单击鼠标,就会加一种光效，移动鼠标，光柱还能跟随变动，浏览器要求为IE4.0以上。具备四种光效反复循环等。

　　演示代码：

<HTML> <HEAD> <TITLE>Dynamic Lighting Effects with DHTML Multimedia</TITLE> <style> .30pt{font-size:30pt;font-family:方正行楷繁体;colro:#ff66cc} </style> </HEAD> <BODY text=red> <table style="position:absolute;top:120px;left:80px" border=1> <tr> <td ID=flttgt style="filter:light(enabled=1);width:200"><img style="width:200;height:200" src=/uploads/common/images/p1.jpg></td> <td width=50></td> <td width=400 height=200><center><span id=holder class="30pt">很棒的光效。请在图上单击鼠标。</span></center></td> </tr> </table> <p> <center><font color=darkyellow>动态的光效</font></center> <script language=JavaScript> var g_numlights = 0; var blurbs = new Array( "很棒的光效。请在图上单击鼠标。.", "使用了光效滤镜。每次在图上单击鼠标,就会加一种光效。", "移动鼠标，光柱还能跟随变动。", "浏览器要求为IE4.0以上。" ); window.onload = setlights; document.onclick=keyhandler; flttgt.onmousemove=mousehandler; //设置光效 function setlights(){ flttgt.filters[0].clear(); flttgt.filters[0].addcone(0,0,5,100,100,255,255,0,60,15); if(g_numlights>0){ flttgt.filters[0].addcone(0,200,5,100,100,255,0,0,60,15); if(g_numlights>1){ flttgt.filters[0].addcone(200,200,5,100,100,0,255,255,60,15); if(g_numlights>2){ flttgt.filters[0].addcone(200,0,5,100,100,255,0,255,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(0,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); if( g_numlights > 2 ){ flttgt.filters[0].movelight(3,x,y,5,1); } } } } </script> </BODY> </HTML><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：核心网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

三星联合开发，真全面	realme Book增强版配置
小米12系列在西欧上线	iPhone 14 Pro前瞻工