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.οnlοad=setlights1;
// 获得鼠标句柄
lightsy.οnmοusemοve=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.οnlοad=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程序稍作改动,就可获得更加美妙和效果。
![巧用CSS的Light滤镜 巧用CSS的Light滤镜](http://tech.china.com/zh_cn/netschool/homepage/css/600/20001127/05-1.jpg)
![巧用CSS的Light滤镜 巧用CSS的Light滤镜](http://tech.china.com/zh_cn/netschool/homepage/css/600/20001127/05-2.jpg)
上面的这种效果是不是很酷?!当你把鼠标在图片上移动时,灯光还会跟着移动呢!不过这里只是我抓的一张图片,当你按我下面介绍的方法做一下,就可以试试如何让灯光跟着鼠标移动的效果了!其实这种效果在DW3中做起来一点都不难,不过这次光用鼠标点点是不行了。那我们就开始做吧。
制作步骤。
1、点击对象面板上的“imge"图标插入一幅图片;
2、用鼠标点一下插入的图片,打开DW3的源码检视窗,在刚插入图片的 “imge"标记中加入这样的代码:ID="lightsy" style="filter:light(enabled=1)" ;
3、然后在网页的源代码的“imge"标记代码后插入这样一段Javascript 程序:
< script language="Javascript" >
< !--
// 调用设置光源函数
window.οnlοad=setlights1;
// 获得鼠标句柄
lightsy.οnmοusemοve=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.οnlοad=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程序稍作改动,就可获得更加美妙和效果。