实际项目中li和里边的数值是动态生成的，需要控制它的宽度和颜色，效果如图： 如果能实现颜色按数值规律变化就好了，目前颜色是固定到数组中的。 实例代码如下： <br /> li{<br /> padding-left: 20px;<br /> list-style: none;<br /> }<br /> li>div{<br /> height: 20px;<br /> background-color: #038faa;<br /> border-top-right-radius: 10px;<br /> border-bottom-right-radius: 10px;<br /> display: inline-block;<br /> position: relative;<br /> }<br /> li>div>span{<br /> display: inline-block;<br /> position: absolute;<br /> right: -22px;<br /> }<br /> 56 18 16 13 11 9 9 8 7 7 <br /> $(function(){<br /> var hotMaxNum = $("div:first").find("span").html();<br /> $("div").each(function(){<br /> var hotNum = $(this).find("span").html();<br /> $(this).width(hotNum/hotMaxNum*350);<br /> });<br /> });<br /> $(function(){<br /> var colorValue = new Array("#ffbbff", "#ffd39b", "#c6e2ff", "#9f79ee", "#9bcd9b","#ff8c00","#87ceff","#3addfc","#cd69c9","#00eeee");<br /> var tempValue = $("span").eq(0).html();<br /> var y = 0;<br /> $("span").each(function(){<br /> var hotNumMax = $(this).html();<br /> if(hotNumMax*1<tempValue){<br /> tempValue = hotNumMax*1;<br /> y++;<br /> }<br /> $(this).parent().css( {"background-color":colorValue[y],"color":colorValue[y]} );<br /> }); <br /> });<br />
