CSS教學(八) 簡單介紹CSS結合JS的運用

八、 簡單介紹CSS結合JS的運用（針對事件動作）

利用CSS配合javascript的可以做很多更酷的動態頁面效果，在本教程的最後跟大家簡單介紹一下CSS配合JS的應用。首先，我們要搞清楚事件和動作的概念。在客戶端腳本中，javascript 透過回應事件來獲得與使用者的互動。例如，當使用者點擊一個按鈕或在某段文字上移動滑鼠時，就觸發了一個點擊事件或滑鼠移動事件，透過對這些事件的回應，可以完成特定的功能（例如，點擊按鈕彈出對話框，滑鼠移動到文字上後文字變色等）。 以下介紹幾種常見的事件（還使用更多事件，請查閱相關資料）：

onClick：滑鼠點選事件。 （是指滑鼠按下，然後放開時產生。）

onDblClick：滑鼠雙擊事件。 （是指滑鼠快速按下，放開，並再次按下時產生。）

onMouseDown：滑鼠按下事件。 （滑鼠按下時即產生。）

onMouseUp：滑鼠釋放事件。 （是指滑鼠從按下的狀態到彈起。）

onMouseMove：滑鼠移動事件。 （是指在特定元素上移動滑鼠。）onMouseOver：滑鼠經過事件。 （是指，當指標從外界往元素移動時產生。）

onMouseOut：滑鼠離開事件。 （是指滑鼠從特定元素離開時產生。）

onLoad：載入事件。 （當圖像或頁面結束載入時產生。）

onUnload：卸載事件。 （當訪客離開頁面時產生。）

onScroll：滾動條滾動事件。 （當訪客使用捲軸上移或下移時產生。）

有了事件以後，我們就為事件加上動作。這裡只說改變目前元素自訂樣式的動作，我們可以用這個方法先設定好兩個自訂的CSS樣式，物件原先呼叫第一種樣式，當產生滑鼠事件時讓物件套用到第二種CSS樣式，而產生的滑鼠效果，看下面這個例子。

在網頁中插入一個圖象，自訂一個「.out」樣式，用gray濾鏡讓圖片變成黑白的：

將這個自訂樣式套用到圖片上，在瀏覽器中預覽到圖片變成了黑白，我們再定義一個樣式“.over”，這個樣式沒有任何內容，是空樣式，樣式表代碼如下：



然後在圖片標記（IMG）裡加上“onMouseOver="this.className='over'" onMouseOut="this.className='out'"”，意思為當滑鼠經過時，圖片為over樣式，即彩色正常圖象；當滑鼠離開時，圖片為out樣式，即黑白圖象。 oMouseOver和onMouseOut是滑鼠事件，this.className=」…」表示目前物件的class名為…，注意大小寫不要寫錯，JS對大小寫非常敏感。

這樣這個效果就完成了，儲存後在瀏覽器裡打開，圖像是黑白的，當滑鼠移上去時，圖象變成彩色，滑鼠離開時，圖象又變回黑白。只要發揮你的想像，透過this.className方法還可以做出很多好看的滑鼠效果。

以上是CSS教學(八) 簡單介紹CSS結合JS的運用的詳細內容。更多資訊請關注PHP中文網其他相關文章！