DIV CSS 佈局教程網

利用CSS配合Javascript的可以做很多更酷的動態頁面效果，在本教程的最後給大家簡單介紹一下CSS配合JS的應用。首先，我們要搞清楚事件和動作的概念。在客戶端腳本中，JavaScript 通過對事件進行響應來獲得與用戶的交互。例如，當用戶單擊一個按鈕或者在某段文字上移動鼠標時，就觸發了一個單擊事件或鼠標移動事件，通過對這些事件的響應，可以完成特定的功能（例如，單擊按鈕彈出對話框，鼠標移動到文本上後文本變色等）。

下面介紹幾種常見的事件（還用更多事件，請查閱相關資料）：
onClick：鼠標單擊事件。（是指鼠標按下，然後松開時產生。）
onDblClick：鼠標雙擊事件。（是指鼠標快速按下，松開，並再次按下時產生。）
onMouseDown：鼠標按下事件。（鼠標按下時即產生。）
onMouseUp：鼠標釋放事件。（是指鼠標從按下的狀態到彈起。）
onMouseMove：鼠標移動事件。（是指在特定元素上移動鼠標。）
onMouseOver：鼠標經過事件。（是指，當指針從外界往元素上移動時產生。）
onMouseOut：鼠標離開事件。（是指鼠標從特定元素上離開時產生。）
onLoad：載入事件。（當圖象或頁面結束載入時產生。）
onUnload：卸載事件。（當訪問者離開頁面時產生。）
onScroll：滾動條滾動事件。（當訪問者使用卷軸上移或下移時產生。）

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

在網頁中插入一個圖象，自定義一個“.out”樣式，用gray濾鏡使圖片變成黑白的：
 

將這個自定義樣式應用到圖片上，在浏覽器中預覽到圖片變成了黑白，我們再定義一個樣式“.over”，這個樣式沒有任何內容，是空樣式，樣式表代碼如下：
<style type="text/css">
<!--
.over {}
.out {filter: Gray}
-->
</style>

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

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

到這裡，所有教程的內容就都講完了，希望大家在學習中能靈活運用屬性及方法，深刻理解規律和概念。

到這裡，CSS速成手冊全文完畢，希望大家能夠自己動手調試。

漢網天下（http://www.hanwangtx.com）版權所有，轉載請注明出處。