实际项目中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>

最新文章

1. iOS不得姐项目--TabBar的重复点击实现当前模块刷新;状态栏点击实现当前模块回滚到最顶部
2. HDU-4528 小明系列故事——捉迷藏 BFS模拟
3. 关于 static 的用途
4. C# this.invoke()作用 多线程操作UI
5. kakfa源码编译打包
6. 重拾C，一天一点点_3
7. Cordova 3.0 + Eclipse 开发流程
8. ASP.NET MVC 4 让数据库自动迁移
9. java-4-类和对象
10. 记录Yii2代码调试中出现的两个问题(截图展示)
11. MYSQL双主全库同步复制
12. TDX指标的理解与改造（价格到达指标线提醒）
13. 获取map集合中key、value
14. Ubuntu轻松编译openJDK
15. 使用Excel批量给数据添加单引号和逗号
16. tp框架中的一些疑点知识-5
17. excelToWord-vba
18. getattr()函数详解
19. JAVA语言基础内部测试题(50道选择题)
20. 【BZOJ2554】Color 概率神题

热门文章

1. C语言static
2. LINQ系列：LINQ to XML类
3. 实战MEF（5）：导出元数据
4. 【转】WPF 给DataGridTextColumn统一加上ToolTip
5. 【原创】开源Math.NET基础数学类库使用(03)C#解析Matlab的mat格式
6. AngularJS之Scope及Controller（一）
7. 门外汉的IT
8. Mobile Web中URL设计问题
9. 坑爹的Maven
10. EntityFramework 7 OrderBy Skip Take－计算排序分页 SQL 翻译