捕風(fēng)之巢

          統(tǒng)計(jì)

          留言簿(3)

          java友情鏈接

          閱讀排行榜

          評(píng)論排行榜

          CSS 濾鏡應(yīng)用集錦 -- 巧用CSS的 Light 濾鏡

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

          上面的這種效果是不是很酷?!當(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ì)象面板上的“image"圖標(biāo)插入一幅圖片;
          2、用鼠標(biāo)點(diǎn)一下插入的圖片,打開(kāi)DW3的源碼檢視窗,在剛插入圖片的 “imge"標(biāo)記中加入這樣的代碼:ID="lightsy" style="filter:light(enabled=1)" ;
          3、然后在網(wǎng)頁(yè)的源代碼的“image"標(biāo)記代碼后插入這樣一段Javascript 程序:
          < script language="Javascript" >
          < !--
          // 調(diào)用設(shè)置光源函數(shù)
          window.onload=setlights1;
          // 獲得鼠標(biāo)句柄
          lightsy.onmousemove=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.onload=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),就可獲得更加美妙和效果。

          posted on 2006-10-30 17:31 捕風(fēng) 閱讀(165) 評(píng)論(0)  編輯  收藏


          只有注冊(cè)用戶登錄后才能發(fā)表評(píng)論。


          網(wǎng)站導(dǎo)航:
           
          主站蜘蛛池模板: 南澳县| 义乌市| 邵阳市| 奈曼旗| 上杭县| 个旧市| 公主岭市| 遂溪县| 屏边| 平和县| 乐安县| 汕头市| 红原县| 仁布县| 广南县| 河池市| 宜章县| 叙永县| 光山县| 巴东县| 密山市| 收藏| 上林县| 鄂伦春自治旗| 饶平县| 内丘县| 禄丰县| 高唐县| 铁岭市| 松桃| 泸溪县| 凤翔县| 九龙坡区| 九江县| 龙川县| 钦州市| 泸水县| 兴义市| 峨眉山市| 师宗县| 贞丰县|