用CSS實作滑鼠點選特效_CSS/HTML

如果你能很好地應用CSS，那麼你的主頁將被打扮得很靚。下面就來介紹用CSS做出的一個滑鼠點選特殊效果圖。

1、將下面的程式碼複製到你的主頁中和之間。

〈STYLE〉.shadow {
　　FILTER: shadow(color=blue，direction=225)
　　}
　　.shadow1 {
　＀ 🎜>　　}
　　.shadow2 {
　　FILTER: shadow(color=green，direction=225)
　　}　。. ection =135，strength=10); WIDTH: 800px
　　}
　　〈/STYLE〉

這裡套用的是blur濾鏡。

2、在頁面中插入一張圖片，例如我插入是〈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.設定了圖片屬性後，我們還要應用Javascript腳本程式碼，也就是讓圖片跟著滑鼠移動一些特效，程式碼如下。

〈script language=Javascript〉

　　〈!--

　　var g_numlights=0;

　　var blurbs= new Array(" 現在的動態濾鏡賦予了更多的互動效能來回應使用者網頁的動作。 ;
　　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){
0].addcone(400，170，5，100，100，225，0，0，160，15);
　　if (g_numlights>1){
　　flttgt.filters[0].addcone(
　　flttgt.filters[0].addcone(3320， 330，5，100，100，0，225，225，60，15);
　　}
　　}
　　}
　　}
　　}
　　　} (g_numlights+= 1)%4;
　　holder.innerHTML=blurbs[g_numlights];
　　setlights();
　　}
　　function　〦〕〜　〜〕〜. 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)
　　{
　2，x，y，5，1);
　　}
　　}
　　}
　　〈/script〉

這樣就設定好一個比較有個性的圖片特效