この記事では、JS+CSSの方法について説明して、LIリストのインターレース色の変化効果を実装しています。参照のためにそれを共有してください。特定の実装方法は次のとおりです。
次のようにコードをコピーします。
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title> css+jsは、liリストのインターレースの色の変更効果を実現します</title>
</head> <body>
<style>
.myTable {border-collapse：collapse; border：solid＃6aa70b; border-width：0px 0 0 px; width：50％;}
.MyTable Ul Li {PADDING-TOP：5PX; TEXT-INDENT：2EM; LIST-STYLE：NONING; BACKUSION：URL（/IMAGES/20110704/NEW_DOT.GIF）3PX 50％NO-Reepeat; Border-Bottom：＃6AA70B 1PXドットドット;フォントファミリー：Verdana、 12px; color：＃008000; Text-align：left; height：25px;}
.MyTable UL Li.T1 {background-color：#effedd;}
.mytable ul li.t2 {background-color：#ffffff;}
.MyTable UL Li.T3 {background-color：＃d2fca0;}
</style>
<ボディスタイル=マージン：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メソッド写真をクリックしてページをターンすることの表示効果を実現するための</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">
多次元配列で各ユニットの値を2倍にする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"）;
function $（）{
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;
};
}
//->
</script>
</body>
</html>
この記事がみんなのJavaScriptプログラミングに役立つことを願っています。