首页 > 代码库 > li进度条宽度和颜色按顺序显示的效果。
li进度条宽度和颜色按顺序显示的效果。
实际项目中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 = http://www.mamicode.com/new Array("#ffbbff", "#ffd39b", "#c6e2ff", "#9f79ee", "#9bcd9b","#ff8c00","#87ceff","#3addfc","#cd69c9","#00eeee");
var tempValue = http://www.mamicode.com/$("span").eq(0).html();
var y = 0;
$("span").each(function(){
var hotNumMax = $(this).html();
if(hotNumMax*1<tempValue){
tempValue = http://www.mamicode.com/hotNumMax*1;
y++;
}
$(this).parent().css( {"background-color":colorValue[y],"color":colorValue[y]} );
});
});
</script>
</body>
</html>
li进度条宽度和颜色按顺序显示的效果。