zoukankan      html  css  js  c++  java
  • 隔行变色( 表格隔行变色 + LI 浮动隔行变色 )

    第一篇文章哈  随便写写

    表格隔行变色,一个很普通的js效果...
    但是我非常不喜欢用table,一是代码累赘,再是...
    我通常用li写信息列表。

    例如相册列表,
    通常是用浮动排版,或者block-inline...
    一行有好几个li元素
    这时要隔行变色的话...

    首先假如总共有7个li,
    一行有3个li,
    那最后一行就只有一个li,
    如果要隔行变色的话,
    最后一行自然得添加2个li并给上背景...
    
    
    /*
     parentNodeId   父元素
     nodeName       子元素nodeName
     VerticalNum    一行有几个nodeName的元素
     color          颜色
     startRow       开始的设置背景行数 1 or 2
     */
     function rowBj(parentNodeId,nodeName,VerticalNum,color,startRow){
         var parentNode=document.getElementById(parentNodeId);
         var allNode=parentNode.getElementsByTagName(nodeName);
     
         if(startRow!=1&&startRow!=2){startRow=1}
     
         var k=(allNode.length)/VerticalNum;
         while(Math.floor(k)!=k){
             var newNode=document.createElement(nodeName);
             parentNode.appendChild(newNode);
             allNode=parentNode.getElementsByTagName(nodeName);
             k=(allNode.length)/VerticalNum;
         }
     
         for (var i=0;i<allNode.length;i++){
             var hangshu=Math.floor((i+VerticalNum)/VerticalNum);
             var num=hangshu/2;
             if(startRow==2&&num==Math.floor(num)){allNode[i].style.background=color}
             else if(startRow==1&&num!=Math.floor(num)){allNode[i].style.background=color}
             else{allNode[i].style.background=''}
         }
         
     }
    调用
    window.onload=function(){
    rowBj('qita','li',4,'#c99',1);
    rowBj('qita_1','li',1,'#c99',2);
    rowBj('qita_2','tr',1,'#c99',2);
    }

    -------------------------------------------------------------

    @Canrz 说的css方式 我还真没用过 学习了
    也贴出示例
    [ie8- 不支持
    css 隔行换色:
        nth-of-type / nth-child odd(单) even(双)


    <style>
    #qita_3{800px;overflow:hidden;padding:10px;background:#666;}
    #qita_3 li{height:30px;background:#999;margin:6px 0;}
    #qita_3 li:nth-child(odd){background:#999;}
    #qita_3 li:nth-child(even){background:#c99;}
    #qita_4{800px;overflow:hidden;padding:10px;background:#
    666;} #qita_4 li{190px;height:30px;float:left;margin:6px 5px;background:#999;} #qita_4 li:nth-child(8n+0), #qita_4 li:nth-child(8n-1), #qita_4 li:nth-of-type(8n-2), #qita_4 li:nth-of-type(8n-3){background:#c99;} </style> <ul id="qita_3"> <li>list 1</li><li>list 2</li><li>list 3</li> <li>list 4</li> </ul> <ul id="qita_4"> <li>list 1</li><li>list 2</li><li>list 3</li><li>list 4</li> <li>list 5</li><li>list 6</li><li>list 7</li><li>list 8</li> <li>list 9</li><li>list 10</li><li>list 11</li><li>list 12</li> <li>list 13</li><li>list 14</li><li>list 15</li> </ul>

     

    
    

     




    demo










  • 相关阅读:
    mybatis学习$与#号取值区别
    java学习
    mybatis学习
    spring mvc 数据校验(bean实体注解实现)
    maven学习
    java.lang.ClassNotFoundException: org.springframework.web.util.WebAppRootListener
    20180804 excel规划求解。。。
    java.lang.IllegalArgumentException: Invalid character found in the request target. The valid characters are defined in RFC 7230 and RFC 3986
    mybatis config 配置设置说明
    进程状态以及状态转换
  • 原文地址:https://www.cnblogs.com/chocho/p/4381955.html
Copyright © 2011-2022 走看看