作者：?馮永曜

Light濾鏡能產(chǎn)生一個(gè)模擬光源的效果，但使用它要通過(guò)調(diào)用它的“方法（Method）”來(lái)實(shí)現(xiàn)，這就要用到一些Javascrpt知識(shí)，雖然有一點(diǎn)難度，但產(chǎn)生的效果也是奇特的，你看看下面的效果圖就明白了。
圖1 原圖
圖2 Light光源濾鏡效果

　　上面的這種效果是不是很酷？！當(dāng)你把鼠標(biāo)在圖片上移動(dòng)時(shí)，燈光還會(huì)跟著移動(dòng)呢！不過(guò)這里只是我抓的一張圖片，當(dāng)你按我下面介紹的方法做一下，就可以試試如何讓燈光跟著鼠標(biāo)移動(dòng)的效果了！其實(shí)這種效果在DW3中做起來(lái)一點(diǎn)都不難，不過(guò)這次光用鼠標(biāo)點(diǎn)點(diǎn)是不行了。那我們就開(kāi)始做吧。
　　制作步驟。
　　1、點(diǎn)擊對(duì)象面板上的“imge"圖標(biāo)插入一幅圖片；
　　2、用鼠標(biāo)點(diǎn)一下插入的圖片，打開(kāi)DW3的源碼檢視窗，在剛插入圖片的 “imge"標(biāo)記中加入這樣的代碼：ID="lightsy" style="filter:light(enabled=1)" ；
　　3、然后在網(wǎng)頁(yè)的源代碼的“imge"標(biāo)記代碼后插入這樣一段Javascript 程序：
　　< script language="Javascript" >
　　< !--
　　// 調(diào)用設(shè)置光源函數(shù)
　　window.οnlοad=setlights1;
　　// 獲得鼠標(biāo)句柄
　　lightsy.οnmοusemοve=mousehandler;
　　// 調(diào)用Light濾鏡方法
　　function setlights1(){
　　lightsy.filters[0].addcone(380,-20,5,100,100,255,255,0,40,25); }
　　// 捕捉鼠標(biāo)的位置來(lái)移動(dòng)光線焦點(diǎn)
　　function mousehandler()
　　{
　　　x=(window.event.x-40);
　　　y=(window.event.y-40);
　　　lightsy.filters[0].movelight(0,x,y,5,1);
　　}
　　-- >
　　< /script >
　　若是你不想讓鼠標(biāo)能控制燈光移動(dòng)，那么只要下面這樣幾行代碼就行了：
　　< script language="Javascript" >
　　< !--
　　// 調(diào)用設(shè)置光源函數(shù)
　　window.οnlοad=setlights1;
　　// 調(diào)用Light濾鏡方法
　　function setlights1()
　　{
　　　lightsy.filters[0].addcone(380,-20,5,100,100,255,255,0,40,25); }
　　}
　　-- >
　　< /script >
　　至此，按F12就可看到奇妙的效果了，不難吧！ 我們不但要知其然，還要知其所以然，本例中很關(guān)鍵的是這句程序代碼：lightsy.filters[0].addcone(380,-20,5,100,100,255,255,0,40,25);括號(hào)中的數(shù)值是可以修改的，通過(guò)設(shè)置不同的值可以獲得各種各樣的燈光效果，那么這些數(shù)值參數(shù)代表什么意思呢？
　　第一個(gè)參數(shù)：光源的X坐標(biāo)；第二個(gè)參數(shù)：光源的Y坐標(biāo)；第三個(gè)參數(shù)：光源離開(kāi)頁(yè)面的高度；第四至第六個(gè)參數(shù)：光源的顏色；第七個(gè)參數(shù)：光源光的色相；第八個(gè)參數(shù)：光源的形狀；第九個(gè)參數(shù)：光源的光的強(qiáng)度 ；第十個(gè)參數(shù)：光源光散開(kāi)的范圍。
　　一個(gè)光源不夠，怎么辦？你可以增加任意個(gè)光源。方法也很簡(jiǎn)單，就是在“setlights1 "函數(shù)中再增加幾句lightsy.filters[0].addcone(380,-20,5,100,100,255,255,0,40,25)代碼 ，不要忘記把參數(shù)改動(dòng)一下，不然的話，光源都有在同一個(gè)位置可就看不出效果了。
　　上面只是用Javascript調(diào)用了Light濾鏡的“addcone"（加入錐形光源）和“movelight"（移動(dòng)光源）方法。Light濾鏡還有一些方法，介紹如下：
addambient ： 加入包圍的光源；
addpoint ： 加入點(diǎn)光源；
changcolor ：改變光的顏色；
changestrength：改變光源的強(qiáng)度；
clear ： 清除所有光源。
　　我們只要對(duì)上面的Javascript程序稍作改動(dòng)，就可獲得更加美妙和效果。

總結(jié)

以上是生活随笔為你收集整理的巧用CSS的Light滤镜的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。