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>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
