作者：理想轉(zhuǎn)貼自：理想帝國(guó)
以往我們多采用flash或者java等在網(wǎng)頁(yè)上實(shí)現(xiàn)圖片的探照燈效果，做起來(lái)相對(duì)復(fù)雜。現(xiàn)在我們使用功能強(qiáng)大的Dreamweaver可以簡(jiǎn)化很多制作過(guò)程。先看看下面作成后的效果：
下面給各位介紹制作過(guò)程：
步：準(zhǔn)備圖片
我們需要兩張圖片，一張是背景圖，選擇一張你喜愛的圖片；另一張是用來(lái)做探照燈用的，你可以用fireworks等作圖工具繪一圓形的圖案。如下所示：
背景圖（girl.jpg 尺寸255x190） 圓形圖（r.gif 尺寸：60x60）
第二步：建兩個(gè)層
用Dreamweaver建兩個(gè)層layer1和layer2。
層layer1用來(lái)放置背景圖片，所以層的大小和圖片一致，即255x190，然后將圖片girl.jpg插入層，或者將圖片設(shè)置為背景均可；接著給層設(shè)置clip屬性，clip可以使超出該層的部分被剪切掉，clip也設(shè)置成圖片大小，即左上角坐標(biāo)取（0，0），右下角坐標(biāo)�。�255，190）。設(shè)置clip屬性這一步很關(guān)鍵。層layer1的位置任意。
層layer2是用來(lái)放探照燈的，它必須是layer1的子層。所謂子層，也是代碼是嵌套的：
...
由于層layer2將被設(shè)置為可以拖動(dòng)的，為了保證層在被拖動(dòng)過(guò)程中始終能覆蓋住層layer1，必須將層layer2的大小至少設(shè)置為layer1的兩倍大，即設(shè)置為510x380；現(xiàn)在你明白設(shè)置層layer1的clip屬性的重要性了吧：層layer2比層layer1大，用clip將層layer2出界的部分剪掉，這樣才能達(dá)到預(yù)定效果。接著把r.gif插入到層layer2中，注意要插到層的中心處。然后設(shè)置層layer2的位置，由于層layer2是層layer1的子層，所以起點(diǎn)坐標(biāo)采用相對(duì)坐標(biāo)，即（-255，-190）。
全部完成后效果如下：
�。ㄆ渲型饪�?yàn)閷觢ayer2，內(nèi)框?yàn)閷觢ayer1。） 第三步：添加css濾鏡
先給層layer2添加mask濾鏡，mask顧名思義是給layer2戴個(gè)面具，語(yǔ)法是：
filter:mask(color=black)
這樣layer2只剩下中間那個(gè)透明的圓了。如果你覺得太黑了，可以對(duì)層layer2再加個(gè)alpha濾鏡，使其微微透明，語(yǔ)法是：
filter:alpha(opacity=80)
，為了使探照燈具有層次感，再給圖片r.gif加個(gè)alpha濾鏡,style取值2，即圓形。代碼是：
filter:alpha(opacity=100,style=2)
全部完成后的代碼如下：
第四步：添加動(dòng)畫和行為
添加的動(dòng)畫是讓探照燈來(lái)回移動(dòng)，我想大家都會(huì)，這里不在多解釋了，不過(guò)要注意動(dòng)畫的移動(dòng)范圍，并使其循環(huán)播放。
所要添加的行為有三個(gè)： 1.鼠標(biāo)移上時(shí)動(dòng)畫停止播放； 2.鼠標(biāo)移開時(shí)動(dòng)畫繼續(xù)播放； 3.使層layer2可以被拖動(dòng)。注意設(shè)置可以被拖動(dòng)的范圍，不要太大了，以防止出界。
可以再加點(diǎn)說(shuō)明文字，全部完成后的代碼是：
您想添加的文字
我們?cè)倏纯聪旅娴男Ч?
這是鮮花！
這是陰陽(yáng)圖！
這是磁盤！
這是世界地圖！
這是什么玩意？！別奇怪，這是圖形字體，你只要將這些圖形字體取代r.gif可以了！
webdings字體和wingdings字體是常見的兩種圖形字體，輸入這些字體時(shí)可以先輸入&#，然后再其后面加上數(shù)字編號(hào)。如：
|
這是鮮花的圖案。當(dāng)然你還可以選擇很多你喜愛的圖案，任意組合�！ ∧闳绻�有什么不明白的地方可以從這里下載實(shí)例，再慢慢研究。
上一篇：
使用DW用ASP+ACCESS編寫目錄樹
下一篇：
DW MX 的快鍵一覽表