li进度条宽度和颜色按顺序显示的效果。

最新推荐文章于 2021-07-08 08:25:48 发布

weixin_30925411

最新推荐文章于 2021-07-08 08:25:48 发布

阅读量158

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/cielzhao/p/5811504.html

版权

实际项目中li和里边的数值是动态生成的，需要控制它的宽度和颜色，效果如图：

如果能实现颜色按数值规律变化就好了，目前颜色是固定到数组中的。

实例代码如下：

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title></title>
   <style media="screen">
   li{
        padding-left: 20px;
        list-style: none;
   }
   li>div{
        height: 20px;
        background-color: #038faa;
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
        display: inline-block;
        position: relative;
   }
   li>div>span{
        display: inline-block;
        position: absolute;
        right: -22px;
   }
   </style>
</head>
<body>
   <ul>
       <li>
           <div><span>56</span></div>
       </li>
       <li>
           <div><span>18</span></div>
       </li>
       <li>
           <div><span>16</span></div>
       </li>
       <li>
           <div><span>13</span></div>
       </li>
       <li>
           <div><span>11</span></div>
       </li>
       <li>
           <div><span>9</span></div>
       </li>
       <li>
           <div><span>9</span></div>
       </li>
       <li>
           <div><span>8</span></div>
       </li>
       <li>
           <div><span>7</span></div>
       </li>
       <li>
           <div><span>7</span></div>
       </li>
   </ul>

   <script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
   <script type="text/javascript">
       $(function(){
           var hotMaxNum = $("div:first").find("span").html();
           $("div").each(function(){
               var hotNum = $(this).find("span").html();
               $(this).width(hotNum/hotMaxNum*350);
           });
       });
       $(function(){
           var colorValue = new Array("#ffbbff", "#ffd39b", "#c6e2ff", "#9f79ee", "#9bcd9b","#ff8c00","#87ceff","#3addfc","#cd69c9","#00eeee");
           var tempValue = $("span").eq(0).html();
           var y = 0;
           $("span").each(function(){
               var hotNumMax = $(this).html();
               if(hotNumMax*1<tempValue){
                   tempValue = hotNumMax*1;
                   y++;
               }
               $(this).parent().css( {"background-color":colorValue[y],"color":colorValue[y]} );
           });
       });
   </script>
</body>
</html>