?? ◤css教程_css結合js的運用 --▃▄ 龍 人 網 絡 ▄▃.htm
字號:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from url=(0039)http://www.rr365.net/edu-css/css107.htm -->
<HTML><HEAD><TITLE>◤CSS教程.CSS結合JS的運用 --▃▄ 龍 人 網 絡 ▄▃</TITLE>
<META http-equiv=Content-Language content=zh-cn>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<META content="CSS教程,CSS技巧 " name=keywords>
<META
content=網頁制作教程:asp教程,ASP.net教程,XML教程,PHP教程,FrontpageXP教程,DreamWeaverMX教程,JSP教程,JavaScript教程,VBScript教程,CSS教程,FrontpageXP,DreamWeaverMX,JSP,JavaScript,VBScript,CSS,asp,ASP.net,XML,PHP相關技巧及資源
name=description><LINK href="◤CSS教程_CSS結合JS的運用 --▃▄ 龍 人 網 絡 ▄▃.files/style.css"
type=text/css rel=stylesheet>
<META content="MSHTML 6.00.2900.2604" name=GENERATOR></HEAD>
<BODY language=Javascript1.2
onmouseover="window.status='歡迎光臨【龍人網站】www.rr365.net,專業服務全為您!!!';return true"
onclick=dynOutline() ;>
<TABLE id=table1 width="100%">
<TBODY>
<TR>
<TD background="◤CSS教程_CSS結合JS的運用 --▃▄ 龍 人 網 絡 ▄▃.files/logo4.gif" colSpan=8
height=30> </TD></TR>
<TR>
<TD width=195 height=53><A href="http://www.rr365.net/index.htm"><IMG
height=53 alt=網站優化，網站排名
src="◤CSS教程_CSS結合JS的運用 --▃▄ 龍 人 網 絡 ▄▃.files/logo-up.gif" width=195
border=0></A></TD>
<TD colSpan=7>
<H1 align=center>網頁制作教程：CSS教程</H1></TD></TR>
<TR>
<TD background="◤CSS教程_CSS結合JS的運用 --▃▄ 龍 人 網 絡 ▄▃.files/logo-bt.gif"
height=31>
<P align=center><A
href="http://www.rr365.net/edu-webdesign/index.htm"><FONT
color=#000000>網頁制作教程</FONT></A></P></TD>
<TD align=middle bgColor=#e5ecf9><B><A
href="http://www.rr365.net/index.htm">首 頁</A></B></TD>
<TD align=middle bgColor=#e5ecf9>
<DIV><B><A
href="http://www.rr365.net/web-promotion.htm">網站推廣</A></B></DIV></TD>
<TD align=middle bgColor=#e5ecf9><B><A
href="http://www.rr365.net/webrestruction.htm">網站優化</A></B></TD>
<TD align=middle bgColor=#e5ecf9>
<DIV><B><A
href="http://www.rr365.net/agent/emarketing.htm">輕松代理</A></B></DIV></TD>
<TD align=middle bgColor=#e5ecf9><B><A
href="http://www.rr365.net/webhosting.htm">虛擬主機</A></B></TD>
<TD align=middle bgColor=#e5ecf9>
<DIV><B><A
href="http://www.rr365.net/vpp/domain.htm">域名注冊</A></B></DIV></TD>
<TD align=middle bgColor=#e5ecf9><B><A
href="http://www.rr365.net/webdesign.htm">網站建設</A></B></TD></TR></TBODY></TABLE>
<TABLE id=table2 width="100%">
<TBODY>
<TR>
<TD bgColor=#00ccff colSpan=2 height=10> </TD></TR>
<TR>
<TD vAlign=top width="23%" bgColor=#e5ecf9 rowSpan=5>
<P><IMG height=25 src="◤CSS教程_CSS結合JS的運用 --▃▄ 龍 人 網 絡 ▄▃.files/logo6.gif"
width=25 border=0> <B><A href="http://www.rr365.net/edu-css/css.htm"><FONT
color=#ff0000>CSS教程</FONT></A></B></P>
<UL style="FONT-SIZE: 10pt; LINE-HEIGHT: 13pt">
<LI><A href="http://www.rr365.net/edu-css/css.htm">認識CSS</A>
<LI><A href="http://www.rr365.net/edu-css/css102.htm">語法</A>
<LI><A href="http://www.rr365.net/edu-css/css103.htm">偽類—動態鏈接</A>
<LI><A href="http://www.rr365.net/edu-css/css104.htm">CSS屬性</A>
<LI><A href="http://www.rr365.net/edu-css/css105.htm">CSS定位</A>
<LI>
<P style="LINE-HEIGHT: 13pt" align=left><A
href="http://www.rr365.net/edu-css/css106.htm">濾鏡</A> </P>
<LI>
<P style="LINE-HEIGHT: 13pt" align=left><A
href="http://www.rr365.net/edu-css/css107.htm">CSS結合JS的運用</A> </P>
<LI>
<P style="LINE-HEIGHT: 13pt" align=left><A
href="http://www.rr365.net/edu-css/css108.htm">如何在網頁中插入CSS</A>
</P></LI></UL>
<P><IMG height=25
src="◤CSS教程_CSS結合JS的運用 --▃▄ 龍 人 網 絡 ▄▃.files/logo411.gif" width=25
border=0> <FONT color=#000000><B><A
href="http://www.rr365.net/edu-css/css2.htm"><FONT
color=#008080>CSS技巧</FONT></A></B></FONT></P>
<P><IMG height=25
src="◤CSS教程_CSS結合JS的運用 --▃▄ 龍 人 網 絡 ▄▃.files/logo411.gif" width=25
border=0> <FONT color=#008080><B>CSS相關網站</B></FONT></P>
<UL style="FONT-SIZE: 10pt; LINE-HEIGHT: 13pt">
<LI><A href="http://www.w3.org/Style/CSS/" target=_blank>W3C之CSS規范</A>
<LI><A href="http://www.w3schools.com/css/default.asp" target=_blank>CSS
Tutorial</A> </LI></UL>
<P><IMG height=25
src="◤CSS教程_CSS結合JS的運用 --▃▄ 龍 人 網 絡 ▄▃.files/logo411.gif" width=25
border=0> <B><FONT color=#000000><A
href="http://www.rr365.net/edu-css/css4.htm"><FONT
color=#008080>CSS相關軟件</FONT></A></FONT></B></P>
<P> </P> </TD>
<TD width="77%">
<UL type=square>
<LI>
<P align=center><U><B><FONT size=4>CSS教程.CSS結合JS的運用</FONT></B></U></P>
<P align=left> </P>
<P style="LINE-HEIGHT: 17pt"> <SPAN
style="FONT-SIZE: 11pt">利用CSS配合JavaScript的可以做很多更酷的動態頁面效果，在本教程的最后給大家簡單介紹一下CSS配合JS的應用。首先，我們要搞清楚事件和動作的概念。在客戶端腳本中，JavaScript
通過對事件進行響應來獲得與用戶的交互。例如，當用戶單擊一個按鈕或者在某段文字上移動鼠標時，就觸發了一個單擊事件或鼠標移動事件，通過對這些事件的響應，可以完成特定的功能（例如，單擊按鈕彈出對話框，鼠標移動到文本上后文本變色等）。<BR> 下面介紹幾種常見的事件（還用更多事件，請查閱相關資料）：<BR> onClick：鼠標單擊事件。（是指鼠標按下，然后松開時產生。）<BR> onDblClick：鼠標雙擊事件。（是指鼠標快速按下，松開，并再次按下時產生。）<BR> onMouseDown：鼠標按下事件。（鼠標按下時即產生。）<BR> onMouseUp：鼠標釋放事件。（是指鼠標從按下的狀態到彈起。）<BR> onMouseMove：鼠標移動事件。（是指在特定元素上移動鼠標。）<BR> onMouseOver：鼠標經過事件。（是指當指針從外界往元素上移動時產生。）<BR> onMouseOut：鼠標離開事件。（是指鼠標從特定元素上離開時產生。）<BR> onLoad：載入事件。（當圖像或頁面結束載入時產生。）<BR> onUnload：卸載事件。（當訪問者離開頁面時產生。）<BR> onScroll：滾動條滾動事件。（當訪問者使用卷軸上移或下移時產生。）<BR> 有了事件以后，我們就為事件加上動作。這里只說改變當前元素自定義樣式的動作，我們可以用這個方法先設定好兩個自定義的<A
href="http://www.rr365.net/edu-css/css.htm"><FONT
color=#000000>CSS</FONT></A>樣式，對象原先調用第一種樣式，當產生鼠標事件時讓對象應用到第二種CSS樣式，而產生的鼠標效果，看下面這個例子。<BR> 在網頁中插入一個圖像，自定義一個“.out”樣式，用gray濾鏡使圖片變成黑白的：（^60090411k1^）<BR> 將這個自定義樣式應用到圖片上，在瀏覽器中預覽到圖片變成了黑白，我們再定義一個樣式“.over”，這個樣式沒有任何內容，是空樣式，樣式表代碼如下：<BR> <style
type="text/css"><BR> <!--<BR> .over {}<BR> .out {filter:
Gray}<BR> --><BR> </style><BR> 然后在圖片標記（IMG）里加上“onMouseOver="this.className=＇over＇"
onMouseOut="this.className=＇out＇"”，意思為當鼠標經過時，圖片為over樣式，即彩色正常圖像；當鼠標離開時，圖片為out樣式，即黑白圖像。onMouseOver和onMouseOut是鼠標事件，this.className=＇…＇表示當前對象的class名為…，注意大小寫不要寫錯，JS對大小寫非常敏感。<BR> 這樣這個效果就完成了，保存后在瀏覽器里打開，圖像是黑白的，當鼠標移上去時，圖像變成彩色，鼠標離開時，圖像又變回黑白。只要發揮你的想象，通過this.className方法還可以做出很多好看的鼠標效果。</SPAN><BR>
<P align=left><BR></P></LI></UL></TD></TR>
<TR>
<TD>
<P
align=center>
<A href="http://www.rr365.net/edu-css/css106m.htm">上一節</A>|<A
href="http://www.rr365.net/edu-css/css108.htm">下一節</A></P></TD></TR>
<TR>
<TD>
<HR width="75%" color=#e5ecf9>
<P align=center>網頁教程: <A
href="http://www.rr365.net/edu-asp/index.htm">ASP</A>| <A
href="http://www.rr365.net/edu-asp-net/asp-net.htm">ASP.net</A>| <A
href="http://www.rr365.net/edu-xml/xml.htm">XML</A>| <A
href="http://www.rr365.net/edu-php/php.htm">PHP4</A> | <A
href="http://www.rr365.net/edu-frontpage/frontpage.htm">FrontpageXP</A> |
<A
href="http://www.rr365.net/edu-dreamweaver/dreamweaver.htm">DreamWeaverMX</A></P>
<P
align=center>
<A href="http://www.rr365.net/edu-cplus/c.htm">C#</A>| <A
href="http://www.rr365.net/edu-jsp/jsp.htm">JSP</A> | <A
href="http://www.rr365.net/edu-javascript/javascript.htm">JavaScript</A> |
<A href="http://www.rr365.net/edu-vbscript/vbscript.htm">VBScript</A> | <A
href="http://www.rr365.net/edu-css/css.htm">CSS</A></P></TD></TR>
<TR>
<TD>
<HR width="50%" color=#e5ecf9>
<P> </P></TD></TR>
<TR>
<TD>
<FORM name=query0 action=http://www1.baidu.com/baidu method=get
target=_blank>
<DIV align=center><INPUT type=hidden value=baidu name=tn0> <A
href="http://www.baidu.com/"><IMG alt=Baidu
src="◤CSS教程_CSS結合JS的運用 --▃▄ 龍 人 網 絡 ▄▃.files/baidu_logo.gif" align=bottom
border=0></A> <INPUT size=15 name=word0> <IFRAME border=0 name=I1
marginWidth=0 marginHeight=0
src="◤CSS教程_CSS結合JS的運用 --▃▄ 龍 人 網 絡 ▄▃.files/help1.htm" frameBorder=no
width=0 scrolling=no height=0></IFRAME><INPUT type=submit value=百度搜索>
</DIV></FORM> </TD></TR></TBODY></TABLE>
<TABLE id=table3 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD style="BORDER-BOTTOM: 1px solid" borderColor=#00ccff height=21> </TD></TR>
<TR>
<TD background="◤CSS教程_CSS結合JS的運用 --▃▄ 龍 人 網 絡 ▄▃.files/tdbg.gif"
bgColor=#e5ecf9>
<P align=center><B><A
href="http://www.rr365.net/summary/aboutus.htm">關于我們</A>-<A
href="http://www.rr365.net/summary/paymethod.htm">付款方式</A>-<A
href="http://www.rr365.net/helpcenter/helpcenter.htm">幫助中心</A>-<A
href="http://www.rr365.net/agent/agent.htm">輕松代理</A>-<A
href="http://www.rr365.net/sitemap.htm">網站地圖</A>-<A
href="mailto:support@rr365.net">聯系我們</A></B></P></TD></TR></TBODY></TABLE></BODY></HTML>
?? 快捷鍵說明
復制代碼
Ctrl + C
搜索代碼
Ctrl + F
全屏模式
F11
切換主題
Ctrl + Shift + D
顯示快捷鍵
?
增大字號
Ctrl + =
減小字號
Ctrl + -