CSS結合JS的運用

來源:互聯網
上載者:User

利用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方法還可以做出很多好看的滑鼠效果。

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.