検索

ホームページ >ウェブフロントエンド >jsチュートリアル >JS を使用してリスト ページにインターレース色の変更効果を実装するコード共有の例

JS を使用してリスト ページにインターレース色の変更効果を実装するコード共有の例

黄舟
黄舟オリジナル
2017-03-25 14:27:021601ブラウズ

この記事では、主にリスト ページでインターレース カラー変更エフェクトの JS 実装を詳しく紹介します。興味のある方は参考にしてください。

まずインターレース カラー変更エフェクトを見てください。

JS を使用してリスト ページにインターレース色の変更効果を実装するコード共有の例

コード:

<head runat="server">
 <title></title>
 <script type="text/javascript">
  window.onload = function () {
   var otab = document.getElementById(&#39;tab1&#39;);
   var thiscolor = &#39;&#39;;
   for (var i = 0; i < otab.tBodies[0].rows.length; i++) {
    otab.tBodies[0].rows[i].onmouseover = function () {
     thiscolor = this.style.background;
     this.style.background = &#39;#00FFFF&#39;;
    };
    otab.tBodies[0].rows[i].onmouseout = function () {
     this.style.background = thiscolor;
    };
    if (i % 2) {
     otab.tBodies[0].rows[i].style.background = &#39;&#39;;
    }
    else {
     otab.tBodies[0].rows[i].style.background = &#39;#FFFF00&#39;;
    }
   }
  };
 </script>
</head>
<body>
 <table id="tab1" border="1" style="text-align: center; width: 500px; margin: 200px auto">
  <thead>
   <tr style="background-color: #FF0000">
    <td>
     种族名称
    </td>
    <td>
     种族简称
    </td>
    <td>
     英雄
    </td>
   </tr>
  </thead>
  <tbody>
   <tr>
    <td>
     人类联盟
    </td>
    <td>
     HUM
    </td>
    <td>
     代表性英雄：AM
    </td>
   </tr>
   <tr>
    <td>
     兽人部落
    </td>
    <td>
     ORC
    </td>
    <td>
     代表性英雄：BM
    </td>
   </tr>
   <tr>
    <td>
     不死亡灵
    </td>
    <td>
     UD
    </td>
    <td>
     代表性英雄：DK
    </td>
   </tr>
   <tr>
    <td>
     暗夜精灵
    </td>
    <td>
     NE
    </td>
    <td>
     代表性英雄：DH
    </td>
   </tr>
  </tbody>
 </table>
</body>

以上がJS を使用してリスト ページにインターレース色の変更効果を実装するコード共有の例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：サブウィンドウを閉じてメインウィンドウを更新するための、JS での showModalDialog の使用法の詳細な紹介。次の記事：サブウィンドウを閉じてメインウィンドウを更新するための、JS での showModalDialog の使用法の詳細な紹介。

関連記事

続きを見る