返回列表下一主題上一主題發帖

[分享] 為圖片加上雙色探照燈效果

小誌

　暱稱: 小誌
　頭銜: 曾經也是水電工

管理員 Rank: 9 Rank: 9 Rank: 9

帖子: 1190
主題: 394
精華: 113
積分: 1747
點名: 1
作業系統: Vista
軟體版本: Office 2003
閱讀權限: 200
性別: 男
來自: 台灣
註冊時間: 2010-5-1
最後登錄: 2024-11-25

2021牛年全勤獎章好學求知勳章熱烈參與勳章 2017 雞年全勤獎章 2018 狗年全勤獎章 2019 豬年全勤獎章 2020鼠年全勤獎章

1^# 跳轉到 » 倒序看帖

打印

字體大小: tT

發表於 2010-6-4 01:52 | 只看該作者

[分享] 為圖片加上雙色探照燈效果

javascript, 濾鏡, 圖片

使用目的

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

說明

Light 濾鏡的效果是產生光源照射在物件上, 也就是在物件上模擬光線照射的效果。
在物件加入 Light 濾鏡後, 必須在呼叫 Light 濾鏡的方法, 方能使濾鏡的效果發揮出來。

Light 濾鏡的方法簡列如下：

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

語法結構

<HTML標籤STYLE="filter: Light">

複製代碼

物件.style.filter="Light"
物件.style.filters.Light.方法(方法的參數)

示範

filter=" 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.光碟中收錄完整的範例網頁檔案，方便您直接取用和修改再運用。

樓主熱帖

心安，平安
發表任何無意義的感謝或灌水文章一律砍,珍惜帳號,請詳閱版規!!

靜思自在 : 世上有兩件事不能等：一、孝順二、行善。

返回列表下一主題上一主題