- 帖子
- 1194
- 主題
- 395
- 精華
- 113
- 積分
- 1747
- 點名
- 0
- 作業系統
- Vista
- 軟體版本
- Office 2003
- 閱讀權限
- 200
- 性別
- 男
- 來自
- 台灣
- 註冊時間
- 2010-5-1
- 最後登錄
- 2025-4-11
      
|
使用目的
產生光源照射在物件的效果
說明
- Light 濾鏡的效果是產生光源照射在物件上, 也就是在物件上模擬光線照射的效果。
- 在物件加入 Light 濾鏡後, 必須在呼叫 Light 濾鏡的方法, 方能使濾鏡的效果發揮出來。
Light 濾鏡的方法簡列如下:
方法 | 說明 | AddAmbient | 加入包圍的光源(環境光) | AddCone | 加入錐形光源(類似手電筒或照射) | AddPoint | 加入點光源 | ChangColor | 改變光的顏色 | ChangStrength | 改變光源的強度 | Clear | 清除所有的光源 | MoveLight | 移動光源 |
語法結構- <HTML標籤STYLE="filter: Light">
複製代碼 物件.style.filter="Light"
物件.style.filters.Light.方法(方法的參數)
示範將物件加上光源照射的Light濾鏡效果, 。- filter=" Light "
- filters.Light.AddCone(0, 250, 1, 255, 0, 255, 255, 100, 50, 25)
複製代碼 將物件加上光源照射的Light濾鏡的探照燈效果, 位置「0, 255, 1」、顏色「255, 255, 100」、強度「50」、照射範圍「25」度。- filters.Light.MoveLight(1, 60, 50, 0, 1)
複製代碼 移動物件上索引編號「0」的光源照射位置以「1」絕對位置方式移到「60, 50, 0」。
範例學習 為圖片加上雙色探照燈效果
當網頁文件載入時(onLoad)呼叫「iniLight」函數先將名稱參照「mypic」的圖片物件加上2 個 Light 濾鏡的「AddCone」錐形光源效果, 接著呼叫「MoveRight」函數將建立的錐形光源使用 Light 濾鏡「MoveLight」方法漸次移動向圖片物件兩側照射, 當錐形光源照射到圖片物件的兩側邊緣時, 呼叫「MoveLeft」函數使用 Light 濾鏡「MoveLight」方法將錐形光源照射方向漸次移回圖片物件的中央。
範例原始碼- <html><head><title>css_Light</title>
- <script language="JavaScript">
- Count=0, flag=0
- function iniLight(){
- document.mypic.style.filter="Light"
- document.mypic.filters.Light.AddAmbient(255, 255, 255, 35)
- document.mypic.filters.Light.AddCone(400, 250, 1, 0, 0, 250, 0, 0, 10, 10)
- document.mypic.filters.Light.AddCone(0, 250, 1, 400, 0, 0, 255, 0, 10, 10)
- MoveRight()
- }
- function MoveRight() {
- if(flag==0){
- document.mypic.filters.Light.MoveLight(1, 5, 0, 0, 0)
- document.mypic.filters.Light.MoveLight(2, -5, 0, 0, 0)
- Count++
- if (Count <= 70) {
- setTimeout("MoveRight()", 5)
- } else {
- flag=1
- MoveLeft()
- }
- }
- }
- function MoveLeft() {
- if(flag==1){
- document.mypic.filters.Light.MoveLight(1, -5, 0, 0, 0)
- document.mypic.filters.Light.MoveLight(2, 5, 0, 0, 0)
- Count--;
- if (Count >= 0) {
- setTimeout("MoveLeft()", 1000)
- } else {
- Count = 0
- flag=0
- MoveRight()
- }
- }
- }
- </script>
- </head>
- <bod onload="iniLight()">
- <img name="mypic" src="img/s011.jpg">
- </bod ></html>
複製代碼JavaScript 精緻範例辭典 |  |
不管您是設計動態網頁,或是要用最新的 Ajax 技術,Javascript 都佔了相當吃重的角色. 但是就算學過 Javascript,也不一定都會記得各式各樣的語法,因此一本隨時可以查閱的範例辭典就非常需要。
1.簡易的Javascript 語法入門及基礎觀念,幫助您快速了解JavaScript的使用方式。
2.搭配圖文解說及精美範例示範,讓您不但看得懂,還能馬上知道要怎麼用,是您在設計網頁時最方便的參考書。
3.最後加入 10 個精選綜合範例,讓您了解這些語法是如何實際運用在網頁中。
4.清楚標示適用的各種瀏覽器種類與版本,符合實際需求。
5.光碟中收錄完整的範例網頁檔案,方便您直接取用和修改再運用。 |
|
|