1、將下面的代碼復(fù)制到你的主頁(yè)中和之間。

〈STYLE〉.shadow {
　　FILTER: shadow(color=blue，direction=225)
　　}
　　.shadow1 {
　　FILTER: shadow(color=red，direction=225)
　　}
　　.shadow2 {
　　FILTER: shadow(color=green，direction=225)
　　}
　　.div {
　　CURSOR: move; FILTER: blur(add=ture，direction=135，strength=10); WIDTH: 800px
　　}
　　〈/STYLE〉

在這里應(yīng)用的是blur濾鏡。

2、在頁(yè)面中插入一張圖片，比如我插入是〈img border="0" src="/Article/UploadPic/2005-9/200598478474.jpg" width="300" height="210"〉。在其前加入〈TD id=flttgt style="filter: light(enabled=1)，''width 300''" width=315〉。

在剛才我們插入圖片下一行中加入〈TD style="VERTICAL-ALIGN: top" width=314〉

3、在設(shè)置了圖片屬性后，我們還要應(yīng)用Javascript腳本代碼，也就是使圖片跟隨鼠標(biāo)移動(dòng)一些特效，代碼如下。

〈script language=Javascript〉
　　〈!--
　　var g_numlights=0;
　　var blurbs= new Array(" 現(xiàn)在的動(dòng)態(tài)濾鏡賦予了網(wǎng)頁(yè)更多的交互性能來(lái)響應(yīng)用戶的動(dòng)作。"，" 我們使用了光源濾鏡來(lái)響應(yīng)用戶的點(diǎn)擊。點(diǎn)擊圖片可以增加光源。"，" 通過(guò)捕捉用戶鼠標(biāo)位置的方法來(lái)移動(dòng)光源。"，" 不需要太多的編程。");
　　window.onload=setlights;
　　document.onclick=keyhandler;
　　flttgt.onmousemove=mousehandler;
　　function setlights(){
　　flttgt.filters[0].clear();
　　flttgt.filters[0].addcone(0，0，5，100，100，225，225，0，60，15);
　　if (g_numlights>0){
　　flttgt.filters[0].addcone(400，170，5，100，100，225，0，0，160，15);
　　if (g_numlights>1){
　　flttgt.filters[0].addcone(320，330，5，100，100，0，225，225，60，15);
　　}
　　}
　　}
　　function keyhandler()
　　{
　　g_numlights=(g_numlights+=1)%4;
　　holder.innerHTML=blurbs[g_numlights];
　　setlights();
　　}
　　function mousehandler()
　　{
　　x=(window.event.x-80);
　　y=(window.event.y-80);
　　flttgt.filters[0].movelight(1，x，y，5，1);
　　if(g_numlights>0){
　　flttgt.filters[0].movelight(1，x，y，5，1);
　　if(g_numlights>1)
　　{
　　flttgt.filters[0].movelight(2，x，y，5，1);
　　}
　　}
　　}
　　〈/script〉

這樣就設(shè)置好一個(gè)比較有個(gè)性的圖片特效

最新評(píng)論