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

如果能实现颜色按数值规律变化就好了,目前颜色是固定到数组中的。
实例代码如下:
-
56
-
18
-
16
-
13
-
11
-
9
-
9
-
8
-
7
-
7
<script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript"> <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> </script>










