이 기사에서는 LI 목록의 인터레이스 된 색상 변화 효과를 구현하기위한 JS+CSS의 방법에 대해 설명합니다. 참조를 위해 공유하십시오. 특정 구현 방법은 다음과 같습니다.
코드를 다음과 같이 복사하십시오.
<html xmlns = "http://www.w3.org/1999/xhtml">
<헤드>
<title> CSS+JS는 LI 목록의 인터레이스 색상 변화 효과를 깨닫습니다 </title>
</head> <body>
<스타일>
.MyTable {Border-Collapse : Collapse; Border : Solid #6aa70b; Border-Width : 0px 0 0px; 너비 : 50%;}
.mytable ul li {패딩 탑 : 5px; 텍스트-인도 : 2em; 목록 스타일 : 없음 : 없음; 배경 : url (/images/20110704/new_dot.gif) 3px 50% No-Repeat; Border-Bottom :#6aa70b 1px dotted; font-family : "verdana, font-size : font-size. 12px; 색상 :#008000; 텍스트-정렬 : 왼쪽; 높이 : 25px;}
.mytable ul li.t1 {배경색 : #effedd;}
.mytable ul li.t2 {배경색 : #ffffff;}
.mytable ul li.t3 {배경색 :#d2fca0;}
</스타일>
<바디 스타일 = 마진 : 0;> <br> <br> <br>
<div align = "center">
<div class = mytable id = tab>
<ul>
<li>
<a target = "_ blank"href = "// www.vevb.com/article/61182.htm">
JavaScript에서 텍스트 및 그림 드래그 앤 드롭 효과를 구현하는 방법 </a> </li>
<li>
<a target = "_ blank"href = "// www.vevb.com/article/61181.htm">
jQuery Method 사진을 클릭하고 페이지를 돌리는 디스플레이 효과를 실현하는 </a> </li>
<li>
<a target = "_ blank"href = "// www.vevb.com/article/61180.htm">
재귀 및 무한 분류를 구현하는 PHP 방법 </a> </li>
<li>
<a target = "_ blank"href = "// www.vevb.com/article/61179.htm">
다차원 배열에서 각 장치의 값 (숫자)을 두 배로 늘리는 PHP 방법 </a> </li>
<li>
<a target = "_ blank"href = "// www.vevb.com/article/61178.htm">
공통 기능 분석 PHP 어레이에서 장치를 추가 및 삭제하는 예 </a> </li>
<li>
<a target = "_ blank"href = "// www.vevb.com/article/61177.htm">
JS+CSS는 드래그 가능한 팝업 프롬프트 박스를 구현합니다 </a> </li>
<li>
<a target = "_ blank"href = "// www.vevb.com/article/61176.htm">
JS는 드롭 다운 상자에 표시 할 그림을 선택하는 방법을 구현합니다 </a> </li>
<li>
<a target = "_ blank"href = "// www.vevb.com/article/61175.htm">
JS 이미지를 클릭하여 이미지 주소를 페이스트 보드에 복사하는 방법을 알기 위해 </a> </li>
</ul> </div> <script type = "text/javaScript">
<!-
var ptr = document.getElementById ( "tab"). getElementsByTagName ( "li");
함수 $ () {
for (i = 1; i <ptr.length+1; i ++) {
ptr [i-1] .classname = (i%2> 0)? "t1": "t2";
}
}
Window.onload = $;
for (var i = 0; i <ptr.length; i ++) {
ptr [i] .onmouseover = function () {
this.tmpclass = this.className;
this.className = "T3";
};
ptr [i] .onmouseout = function () {
this.classname = this.tmpclass;
};
}
//->
</스크립트>
</body>
</html>
이 기사가 모든 사람의 JavaScript 프로그래밍에 도움이되기를 바랍니다.