巧用CSS的Light滤镜

作者：冯永曜

Light滤镜能产生一个模拟光源的效果，但使用它要通过调用它的“方法（Method）”来实现，这就要用到一些Javascrpt知识，虽然有一点难度，但产生的效果也是奇特的，你看看下面的效果图就明白了。
图1 原图
图2 Light光源滤镜效果

　　上面的这种效果是不是很酷？！当你把鼠标在图片上移动时，灯光还会跟着移动呢！不过这里只是我抓的一张图片，当你按我下面介绍的方法做一下，就可以试试如何让灯光跟着鼠标移动的效果了！其实这种效果在DW3中做起来一点都不难，不过这次光用鼠标点点是不行了。那我们就开始做吧。
　　制作步骤。
　　1、点击对象面板上的“imge"图标插入一幅图片；
　　2、用鼠标点一下插入的图片，打开DW3的源码检视窗，在刚插入图片的 “imge"标记中加入这样的代码：ID="lightsy" style="filter:light(enabled=1)" ；
　　3、然后在网页的源代码的“imge"标记代码后插入这样一段Javascript 程序：
　　< script language="Javascript" >
　　< !--
　　// 调用设置光源函数
　　window.onload=setlights1;
　　// 获得鼠标句柄
　　lightsy.onmousemove=mousehandler;
　　// 调用Light滤镜方法
　　function setlights1(){
　　lightsy.filters[0].addcone(380,-20,5,100,100,255,255,0,40,25); }
　　// 捕捉鼠标的位置来移动光线焦点
　　function mousehandler()
　　{
　　　x=(window.event.x-40);
　　　y=(window.event.y-40);
　　　lightsy.filters[0].movelight(0,x,y,5,1);
　　}
　　-- >
　　< /script >
　　若是你不想让鼠标能控制灯光移动，那么只要下面这样几行代码就行了：
　　< script language="Javascript" >
　　< !--
　　// 调用设置光源函数
　　window.onload=setlights1;
　　// 调用Light滤镜方法
　　function setlights1()
　　{
　　　lightsy.filters[0].addcone(380,-20,5,100,100,255,255,0,40,25); }
　　}
　　-- >
　　< /script >
　　至此，按F12就可看到奇妙的效果了，不难吧！ 我们不但要知其然，还要知其所以然，本例中很关键的是这句程序代码：lightsy.filters[0].addcone(380,-20,5,100,100,255,255,0,40,25);括号中的数值是可以修改的，通过设置不同的值可以获得各种各样的灯光效果，那么这些数值参数代表什么意思呢？
　　第一个参数：光源的X坐标；第二个参数：光源的Y坐标；第三个参数：光源离开页面的高度；第四至第六个参数：光源的颜色；第七个参数：光源光的色相；第八个参数：光源的形状；第九个参数：光源的光的强度 ；第十个参数：光源光散开的范围。
　　一个光源不够，怎么办？你可以增加任意个光源。方法也很简单，就是在“setlights1 "函数中再增加几句lightsy.filters[0].addcone(380,-20,5,100,100,255,255,0,40,25)代码 ，不要忘记把参数改动一下，不然的话，光源都有在同一个位置可就看不出效果了。
　　上面只是用Javascript调用了Light滤镜的“addcone"（加入锥形光源）和“movelight"（移动光源）方法。Light滤镜还有一些方法，介绍如下：
addambient ： 加入包围的光源；
addpoint ： 加入点光源；
changcolor ：改变光的颜色；
changestrength：改变光源的强度；
clear ： 清除所有光源。
　　我们只要对上面的Javascript程序稍作改动，就可获得更加美妙和效果。