快捷導(dǎo)航

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

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

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

所以自己也下了一個來學(xué)習(xí)，把之前寫的幾個JS代碼都轉(zhuǎn)換成JQuery，既能保證代碼的清晰，也保證了代碼的通用性，真是一舉兩得啊，由于是初學(xué)者，所以代碼有許多的不足，還請大家多多指正：）
1、實現(xiàn)圖片翻轉(zhuǎn)效果，DW本身提供了這個功能，不過還是自己寫的好用，呵呵。之前寫的方式比較麻煩，代碼也比較亂，用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> 