Maison > interface Web > js tutoriel > Exemple de partage de code utilisant JS pour implémenter un effet de changement de couleur entrelacé sur les pages de liste

Exemple de partage de code utilisant JS pour implémenter un effet de changement de couleur entrelacé sur les pages de liste

黄舟
Libérer: 2017-03-25 14:27:02
original
1627 Les gens l'ont consulté

Cet article présente principalement en détail l'implémentation JS de l'effet de changement de couleur entrelacé sur la page de liste. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer

Prenez-en un. regardez en premier Effet de changement de couleur entrelacé :

Exemple de partage de code utilisant JS pour implémenter un effet de changement de couleur entrelacé sur les pages de liste

Code :

<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>
Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal