直播中
以往我們多采用flash或者java等在網(wǎng)頁上實現(xiàn)圖片的探照燈效果,做起來相對復(fù)雜。現(xiàn)在我們使用功能強大的Dreamweaver可以簡化很多制作過程。先看看下面作成后的效果:
下面給各位介紹制作過程:
第一步:準(zhǔn)備圖片
我們需要兩張圖片,一張是背景圖,選擇一張你喜愛的圖片;另一張是用來做探照燈用的,你可以用fireworks等作圖工具繪一圓形的圖案。如下所示:
背景圖(girl.jpg 尺寸255x190) 圓形圖(r.gif 尺寸:60x60)
第二步:建兩個層
用Dreamweaver建兩個層layer1和layer2。
層layer1用來放置背景圖片,所以層的大小和圖片一致,即255x190,然后將圖片girl.jpg插入層,或者將圖片設(shè)置為背景均可;接著給層設(shè)置clip屬性,clip可以使超出該層的部分被剪切掉,clip也設(shè)置成圖片大小,即左上角坐標(biāo)?。?,0),右下角坐標(biāo)取(255,190)。設(shè)置clip屬性這一步很關(guān)鍵。層layer1的位置任意。
層layer2是用來放探照燈的,它必須是layer1的子層。所謂子層,也就是代碼是嵌套的:
<div id="layer1"...><div id="layer2"...>...</div></div>
由于層layer2將被設(shè)置為可以拖動的,為了保證層在被拖動過程中始終能覆蓋住層layer1,必須將層layer2的大小至少設(shè)置為layer1的兩倍大,即設(shè)置為510x380;現(xiàn)在你明白設(shè)置層layer1的clip屬性的重要性了吧:層layer2比層layer1大,用clip將層layer2出界的部分剪掉,這樣才能達(dá)到預(yù)定效果。接著把r.gif插入到層layer2中,注意要插到層的中心處。然后設(shè)置層layer2的位置,由于層layer2是層layer1的子層,所以起點坐標(biāo)采用相對坐標(biāo),即(-255,-190)。
全部完成后效果如下:
|
?。ㄆ渲型饪驗閷觢ayer2,內(nèi)框為層layer1。)
第三步:添加css濾鏡先給層layer2添加mask濾鏡,mask顧名思義就是給layer2戴個面具,語法是:
filter:mask(color=black)
這樣layer2就只剩下中間那個透明的圓了。如果你覺得太黑了,可以對層layer2再加個alpha濾鏡,使其微微透明,語法是:
filter:alpha(opacity=80)
最后,為了使探照燈具有層次感,再給圖片r.gif加個alpha濾鏡,style取值2,即圓形。代碼是:
filter:alpha(opacity=100,style=2)
全部完成后的代碼如下:
<div id="Layer1" style="position:absolute; left:0px; top:0px; width:255px; height:190px; z-index:1; clip: rect(0 255 190 0); background-image: url(girl.jpg); layer-background-image: url(girl.jpg); border: 1px none #000000">
<div id="Layer2" style="filter:mask(color=black) alpha(opacity=80);position:absolute; width:510px; height:380px; z-index:2; left: -255px; top: -100px"> |
第四步:添加動畫和行為
添加的動畫是讓探照燈來回移動,我想大家都會,這里不在多解釋了,不過要注意動畫的移動范圍,并使其循環(huán)播放。
所要添加的行為有三個:
1.鼠標(biāo)移上時動畫停止播放;
2.鼠標(biāo)移開時動畫繼續(xù)播放;
3.使層layer2可以被拖動。注意設(shè)置可以被拖動的范圍,不要太大了,以防止出界。
最后可以再加點說明文字,全部完成后的代碼是:
<div id="Layer1" style="cursor:crosshair;position:absolute; left:0px; top:0px; width:255px; height:190px; z-index:1; clip: rect(0 255 190 0); background-image: url(girl.jpg); layer-background-image: url(girl.jpg); border: 1px none #000000" onMouseOut="MM_timelinePlay(Timeline1)" onMouseOver="MM_timelineStop()"> <marquee behavior=scroll direction=right width=50 height=120 scrollamount=1 scrolldelay=0 ><font style="margin-top:50;writing-mode:tb-rl;font-size:9pt" face="楷體_GB2312" color=red>您想添加的文字<br> <br> </font> </marquee> <div id="Layer2" style="filter:mask(color=black) alpha(opacity=80);position:absolute; width:510px; height:380px; z-index:2; left: -255px; top: -100px"> <p align="center" > <br><br><br><br><br> <img src="r.gif" width="150" height="150" style=" filter:alpha(opacity=100,style=2)"></p> </div> </div> |
我們再看看下面的效果:
這是鮮花!
這是陰陽圖!
這是磁盤!
這是世界地圖!
這是什么玩意?!別奇怪,這是圖形字體,你只要將這些圖形字體取代r.gif就可以了!
webdings字體和wingdings字體是常見的兩種圖形字體,輸入這些字體時可以先輸入&#,然后再其后面加上數(shù)字編號。如:
<font style="font:150px wingdings">|</font>
這是鮮花的圖案。當(dāng)然你還可以選擇很多你喜愛的圖案,任意組合。
你如果還有什么不明白的地方可以從這里下載實例,再慢慢研究。