Board logo

標題: [分享] 為圖片加上雙色探照燈效果 [打印本頁]
作者: 小誌    時間: 2010-6-4 01:52     標題: 為圖片加上雙色探照燈效果

使用目的

產生光源照射在物件的效果

說明



Light 濾鏡的方法簡列如下：

方法說明
AddAmbient 加入包圍的光源（環境光）
AddCone加入錐形光源（類似手電筒或照射）
AddPoint加入點光源
ChangColor改變光的顏色
ChangStrength 改變光源的強度
Clear清除所有的光源
MoveLight移動光源


語法結構
  1. <HTML標籤STYLE="filter: Light">
複製代碼
物件.style.filter="Light"
物件.style.filters.Light.方法(方法的參數)

示範
  1. filter=" Light "
複製代碼
將物件加上光源照射的Light濾鏡效果, 。
  1. filter=" Light "
  2. filters.Light.AddCone(0, 250, 1, 255, 0, 255, 255, 100, 50, 25)
複製代碼
將物件加上光源照射的Light濾鏡的探照燈效果, 位置「0, 255, 1」、顏色「255, 255, 100」、強度「50」、照射範圍「25」度。
  1. 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」方法將錐形光源照射方向漸次移回圖片物件的中央。
[attach]1109[/attach][attach]1110[/attach][attach]1111[/attach]


範例原始碼
  1. <html><head><title>css_Light</title>
  2. <script language="JavaScript">
  3. Count=0, flag=0
  4. function iniLight(){
  5. document.mypic.style.filter="Light"
  6. document.mypic.filters.Light.AddAmbient(255, 255, 255, 35)
  7. document.mypic.filters.Light.AddCone(400, 250, 1, 0, 0, 250, 0, 0, 10, 10)
  8. document.mypic.filters.Light.AddCone(0, 250, 1, 400, 0, 0, 255, 0, 10, 10)
  9. MoveRight()
  10. }
  11. function MoveRight() {
  12. if(flag==0){
  13. document.mypic.filters.Light.MoveLight(1, 5, 0, 0, 0)
  14. document.mypic.filters.Light.MoveLight(2, -5, 0, 0, 0)
  15. Count++
  16. if (Count <= 70) {
  17. setTimeout("MoveRight()", 5)
  18. } else {
  19. flag=1
  20. MoveLeft()
  21. }
  22. }
  23. }
  24. function MoveLeft() {
  25. if(flag==1){
  26. document.mypic.filters.Light.MoveLight(1, -5, 0, 0, 0)
  27. document.mypic.filters.Light.MoveLight(2, 5, 0, 0, 0)
  28. Count--;
  29. if (Count >= 0) {
  30. setTimeout("MoveLeft()", 1000)
  31. } else {
  32. Count = 0
  33. flag=0
  34. MoveRight()
  35. }
  36. }
  37. }
  38. </script>
  39. </head>
  40. <bod onload="iniLight()">
  41. <img name="mypic" src="img/s011.jpg">
  42. </bod ></html>
複製代碼
JavaScript 精緻範例辭典

不管您是設計動態網頁，或是要用最新的 Ajax 技術，Javascript 都佔了相當吃重的角色. 但是就算學過 Javascript，也不一定都會記得各式各樣的語法，因此一本隨時可以查閱的範例辭典就非常需要。
1.簡易的Javascript 語法入門及基礎觀念，幫助您快速了解JavaScript的使用方式。
2.搭配圖文解說及精美範例示範，讓您不但看得懂，還能馬上知道要怎麼用，是您在設計網頁時最方便的參考書。
3.最後加入 10 個精選綜合範例，讓您了解這些語法是如何實際運用在網頁中。
4.清楚標示適用的各種瀏覽器種類與版本，符合實際需求。
5.光碟中收錄完整的範例網頁檔案，方便您直接取用和修改再運用。




歡迎光臨 麻辣家族討論版版 (http://forum.twbts.com/)