|
|
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>
這里需要注意的是未翻轉(zhuǎn)的圖片名為沒(méi)有_On，部分，如Menu_Home.gif，而翻轉(zhuǎn)圖片的圖片名帶_On，如Menu_Home_On.gif
JavaScript技術(shù)：JQuery學(xué)習(xí)筆記 實(shí)現(xiàn)圖片翻轉(zhuǎn)效果和TAB標(biāo)簽切換效果第1/2頁(yè)，轉(zhuǎn)載需保留來(lái)源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
