CSS配合JavaScript做酷的動(dòng)態(tài)頁面效果_CSS教程
利用CSS配合JavaScript的可以做很多更酷的動(dòng)態(tài)頁面效果,在本教程的最后給大家簡單介紹一下CSS配合JS的應(yīng)用。首先,要搞清楚事件和動(dòng)作的概念。在客戶端腳本中,JavaScript 通過對(duì)事件進(jìn)行響應(yīng)來獲得與用戶的交互。例如,當(dāng)用戶單擊一個(gè)按鈕或者在某段文字上移動(dòng)鼠標(biāo)時(shí),就觸發(fā)了一個(gè)單擊事件或鼠標(biāo)移動(dòng)事件,通過對(duì)這些事件的響應(yīng),可以完成特定的功能(例如,單擊按鈕彈出對(duì)話框,鼠標(biāo)移動(dòng)到文本上后文本變色等)。
下面介紹幾種常見的事件:
onClick:鼠標(biāo)單擊事件。(是指鼠標(biāo)按下,然后松開時(shí)產(chǎn)生。)
onDblClick:鼠標(biāo)雙擊事件。(是指鼠標(biāo)快速按下,松開,并再次按下時(shí)產(chǎn)生。)
onMouseDown:鼠標(biāo)按下事件。(鼠標(biāo)按下時(shí)即產(chǎn)生。)
onMouseUp:鼠標(biāo)釋放事件。(是指鼠標(biāo)從按下的狀態(tài)到彈起。)
onMouseMove:鼠標(biāo)移動(dòng)事件。(是指在特定元素上移動(dòng)鼠標(biāo)。)
onMouseOver:鼠標(biāo)經(jīng)過事件。(是指,當(dāng)指針從外界往元素上移動(dòng)時(shí)產(chǎn)生。)
onMouseOut:鼠標(biāo)離開事件。(是指鼠標(biāo)從特定元素上離開時(shí)產(chǎn)生。)
onLoad:載入事件。(當(dāng)圖象或頁面結(jié)束載入時(shí)產(chǎn)生。)
onUnload:卸載事件。(當(dāng)訪問者離開頁面時(shí)產(chǎn)生。)
onScroll:滾動(dòng)條滾動(dòng)事件。(當(dāng)訪問者使用卷軸上移或下移時(shí)產(chǎn)生。)
有了事件以后,我們就為事件加上動(dòng)作。這里只說改變當(dāng)前元素自定義樣式的動(dòng)作,我們可以用這個(gè)方法先設(shè)定好兩個(gè)自定義的CSS樣式,對(duì)象原先調(diào)用第一種樣式,當(dāng)產(chǎn)生鼠標(biāo)事件時(shí)讓對(duì)象應(yīng)用到第二種CSS樣式,而產(chǎn)生的鼠標(biāo)效果。
CSS教程Rss訂閱Div+Css教程搜索
CSS教程推薦
猜你也喜歡看這些
- XHTML教程:Doctype文檔類型聲明必不可少!
- 九個(gè)W3C XHTML1.0及CSS標(biāo)準(zhǔn)認(rèn)證需要注意的問題
- HTML高級(jí)教程標(biāo)準(zhǔn)要點(diǎn)(xhtml)
- html元素 xhtml文檔根元素特性小結(jié)
- HTML表格標(biāo)記教程(25):行的垂直對(duì)齊屬性VALIGN
- HTML中級(jí)教程表格
- HTML表格標(biāo)記教程(22):行的亮邊框色屬性BORDERCOLORLIGHT
- HTML初級(jí)教程標(biāo)題h1~h6
- 清除網(wǎng)頁文字水印的兩種簡單方法
- 你問我答:XML與HTML的區(qū)別
- 相關(guān)鏈接:
- 教程說明:
CSS教程-CSS配合JavaScript做酷的動(dòng)態(tài)頁面效果
。