Li progress bar width and color display in sequence ., Li progress bar
In the actual project, the values of li and li are dynamically generated, and its width, color, and effect must be controlled.
If you can change the color by numerical value, the color is currently fixed to the array.
The instance code is as follows:
<! 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" example .html ();
$ ("Div"). each (function (){
Var hotNum = $ (this). find ("span" example .html ();
$ (This). width (hotNum/hotMaxNum * 350 );
});
});
$ (Function (){
Var colorValue = new Array ("# ffbbff", "# ffd39b", "# c6e2ff", "# 9f79ee", "# 9bcd9b", "# ff8c00 ", "#87 ceff", "#3 addfc", "# cd69c9", "#00 eeee ");
Var tempValue = $ ("span" 2.16.eq(02.16.html ();
Var y = 0;
$ ("Span"). each (function (){
Var hotNumMax = publish (this).html ();
If (hotNumMax * 1 <tempValue ){
TempValue = hotNumMax * 1;
Y ++;
}
Certificate (this).parent().css ({"background-color": colorValue [y], "color": colorValue [y]});
});
});
</Script>
</Body>
</Html>