이미지 뒤집기 효과 및 TAB 레이블 전환 효과를 달성하기 위한 JQuery 연구 노트_jquery

첫 페이지의 깔끔함을 보장하기 위해 습관적으로 CSS를 별도의 .CSS 파일에 넣어서 호출하고, JS도 별도의 JS 파일에 넣을 수 있으며, onclick, Onmouseover 등 페이지의 이벤트도 가능합니다. JQuery

도 요즘 인터넷에서 꽤 인기가 많아서 예전에 작성했던 여러 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 부분은 다음과 같습니다.

코드 복사 코드는 다음과 같습니다. :

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

여기서 주의할 점은 반전되지 않은 사진의 이름은 Menu_Home.gif와 같이 _On이 아닌 반면, 반전된 사진의 사진 이름은 Menu_Home_On과 같은 _On이 있다는 점입니다. .gif

2. JQuery는 Tab 태그 쓰기 효과를 구현하는데, 이것이 더 일반적으로 사용됩니다. 이전에 JS로 작성된 코드는 여전히 매우 지저분했고 변환 후에도 코드의 일부가 분리되지 않았습니다.
JS 코드:

코드 복사 코드는 다음과 같습니다.

<script type="text/javascript"> 
<!-- 
$(document).ready(function(){ 
$("#MenuTabs p").mouseover(function(){ 
$(this).css("cursor","pointer"); 
var checkmenu = $(this).attr("id"); 
var checkcontent = checkmenu.replace("MenuTab","Content"); 
$("#MenuTabs p").each(function(){ 
if($(this).attr("id") == checkmenu){ 
$(this).attr("class","Tab_On"); 
}else{ 
$(this).attr("class","Tab_Off"); 
} 
}); 
$("#Contents p").each(function(){ 
if($(this).attr("id") == checkcontent){ 
$(this).css("display","block"); 
}else{ 
$(this).css("display","none"); 
} 
}); 
}); 
}); 
//--> 
</script>

HTML 코드:

코드 복사 코드는 다음과 같습니다.

<p style="padding-top:10px;"> 
<p id="MenuTabs" style="float:left;" align="left"> 
<p id="MenuTab1" class="Tab_Off"> 标题一</p> 
<p id="MenuTab2" class="Tab_Off"> 标题二</p> 
<p id="MenuTab3" class="Tab_On"> 标题三</p> 
<p id="MenuTab4" class="Tab_Off"> 标题四</p> 
</p> 
<p id="Contents" style="float:left;"> 
<p id="Content1" style="display:none;">内容一</p> 
<p id="Content2" style="display:none;">内容二</p> 
<p id="Content3" style="display:block;">内容三</p> 
<p id="Content4" style="display:none;">内容四</p> 
</p> 
</p>

CSS 코드:

코드 복사 코드는 다음과 같습니다.

#Contents{ 
width:318px; 
height:125px; 
border-top:1px #d1d1d1 solid; 
border-right:1px #d1d1d1 solid; 
border-bottom:1px #d1d1d1 solid; 
color:#d1d1d1; 
} 
.Tab_Off{ 
width:132px; 
height:30px; 
background-color:#ebebeb; 
vertical-align:middle; 
line-height:30px; 
color:#373737; 
border-bottom:1px #f6f6f6 solid; 
border-top:1px #f6f6f6 solid; 
border-left:1px #ededed solid; 
border-right:1px #d1d1d1 solid; 
} 
.Tab_On{ 
width:132px; 
height:30px; 
background-color:#FFFFFF; 
vertical-align:middle; 
line-height:30px; 
color:#696969; 
border-top:1px #dbdbdb solid; 
border-bottom:1px #dbdbdb solid; 
border-left:1px #dbdbdb solid; 
border-right:1px #FFFFFF solid; 
}

마지막으로 첨부된 효과는

위 내용은 이미지 반전 효과 및 TAB 라벨 전환 효과_jquery를 달성하기 위한 JQuery 연구 노트의 내용입니다. 더 많은 관련 내용을 보려면 PHP 중국어 웹사이트(www.php.cn)를 참고하세요!