JQuery 학습 노트 그림 뒤 집기 효과 와 TAB 태그 전환 효과 1/2 페이지 구현

그래서 자신 도 다음 에 공부 하 러 왔 습 니 다.전에 쓴 JS 코드 를 모두 JQuery 로 바 꾸 었 습 니 다.코드 의 선명 함 도 확보 할 수 있 고 코드 의 유 니 버 설 성도 확보 할 수 있 습 니 다.정말 일거양득 입 니 다.초보 자 이기 때문에 코드 가 부족 합 니 다.그리고 많은 지적 을 바 랍 니 다.)1.이미지 반전 효 과 를 실현 하고 DW 자체 가 이 기능 을 제 공 했 습 니 다.그래도 자기가 쓰 는 게 좋 을 거 야,하하.전에 쓴 방식 이 번 거 롭 고 코드 도 복잡 합 니 다.JQuery 로 개조 하면 더욱 선명 해 질 수 있 습 니 다.핵심 코드 는 다음 과 같 습 니 다.JS 코드

 
<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 부분 은 다음 과 같 습 니 다

 
<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> 

여기 서 주의해 야 할 것 은 뒤 집 히 지 않 은 그림 이름 은On,부분,예 를 들 어 Menu홈.gif,그림 을 뒤 집 는 이미지 명 띠On,예:MenuHome_On.gif
1 2 다음 페이지 전문 을 읽다