快捷導(dǎo)航

JQuery學(xué)習(xí)筆記實(shí)現(xiàn)圖片翻轉(zhuǎn)效果和TAB標(biāo)簽切換效果第1/2頁(yè)

更新時(shí)間：2008年11月19日 12:54:55 作者：

為了保證前臺(tái)頁(yè)面的整潔，我們習(xí)慣性地將CSS放入一個(gè)單獨(dú)的.CSS文件中以便調(diào)用，而JS也同樣可以放到單獨(dú)的JS文件中去，并且頁(yè)面上的事件如onclick，onmouseover也可以分離出來(lái)，現(xiàn)在網(wǎng)上比較流行JQuery

所以自己也下了一個(gè)來(lái)學(xué)習(xí)，把之前寫(xiě)的幾個(gè)JS代碼都轉(zhuǎn)換成JQuery，既能保證代碼的清晰，也保證了代碼的通用性，真是一舉兩得啊，由于是初學(xué)者，所以代碼有許多的不足，還請(qǐng)大家多多指正：）
1、實(shí)現(xiàn)圖片翻轉(zhuǎn)效果，DW本身提供了這個(gè)功能，不過(guò)還是自己寫(xiě)的好用，呵呵。之前寫(xiě)的方式比較麻煩，代碼也比較亂，用JQuery改造后可以使其更加清晰，核心代碼如下：
JS代碼

復(fù)制代碼代碼如下:

 
<script type="text/javascript"> 
<!-- 
$(document).ready(function(){ 
$("#Nav li a img").mouseover(function(){ 
var m = $(this).attr("src"); 
if(m.indexOf("On") < 0){ 
var n = m.split("."); 
var f = n[0] + "_On"; 
var nf = f + "." + n[1]; 
$(this).attr("src",nf); 
} 
}); 
$("#Nav li a img").mouseout(function(){ 
var m = $(this).attr("src"); 
if(m.indexOf("On") >= 0 && $(this).attr("class") != "active"){ 
var n = m.split("."); 
var f = n[0].substring(0,n[0].length-3); 
var nf = f + "." + n[1]; 
$(this).attr("src",nf); 
} 
}); 
}); 
//--> 
</script> 

HTML部分如下：

復(fù)制代碼代碼如下:

 
<div id="Menu"> 
<ul id="Nav"> 
<li><img src="Images/Menu_Line.gif" border="0" /></li> 
<li><a href="#"><img src="Images/Menu_Home.gif" border="0" /></a></li> 
<li><img src="Images/Menu_Line.gif" border="0" /></li> 
<li><a href="#"><img src="Images/Menu_Intro.gif" border="0" /></a></li> 
<li><img src="Images/Menu_Line.gif" border="0" /></li> 
<li><a href="#"><img src="Images/Menu_Lerrn_On.gif" border="0" class="active" /></a></li> 
<li><img src="Images/Menu_Line.gif" border="0" /></li> 
<li><a href="#"><img src="Images/Menu_Studet.gif" border="0" /></a></li> 
<li><img src="Images/Menu_Line.gif" border="0" /></li> 
<li><a href="#"><img src="Images/Menu_Job.gif" border="0" /></a></li> 
<li><img src="Images/Menu_Line.gif" border="0" /></li> 
<li><a href="#"><img src="Images/Menu_About.gif" border="0" /></a></li> 
<li><img src="Images/Menu_Line.gif" border="0" /></li> 
</ul> 
</div> 