<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>17.13jQuery案例十三图表</title>
<script src="../js/jquery-3.1.1.min.js"></script>
<script>
$(function(){
var bardata = new Array(9,18,50,82,54,68,95);
$('#bar li div').each(function(index, element) {
var pre = bardata[index]+'%'; //获取百分数
/*$(this).height(pre);*/
$(this).animate({'height':pre},1000);//设置动画
//为p标签赋值并定位
$(this).next().html(pre).css('bottom',pre);
});
});
</script>
<style>
*{
margin:0;
padding:0;
}
li{ list-style-type:none;}
#chart{
width:400px;
height:300px;
background-color:#FCC;
margin:50px auto;
}
#numList{
width:30px;
height:300px;
float:left;
}
#numList li{
width:30px;
height:30px;
position:relative;
}
#numList li span{
width:30px;
height:14px;
line-height:14px;
font-size:14px;
text-align:right;
border-bottom:1px dotted #333333;
position:absolute;
bottom:0px;
}
#bar li{
float:left;
width:30px;
height:300px;
margin:0 10px;
position:relative;
}
#bar li span{
display:block;
width:30px;
height:20px;
line-height:20px;
font-size:14px;
text-align:center;
position:absolute;
bottom:-20px;
}
#bar li div{
width:30px;
height:0px;
background-color:#03F;
position:absolute;
bottom:0;
}
#bar li p{
width:30px;
height:20px;
color:red;
font-size:14px;
position:absolute;
text-align:center;
display:none;
}
#bar li:hover p{ display:block;}
</style>
</head>
<body>
<div id="chart">
<ul id="numList">
<li><span>90%</span></li>
<li><span>80%</span></li>
<li><span>70%</span></li>
<li><span>60%</span></li>
<li><span>50%</span></li>
<li><span>40%</span></li>
<li><span>30%</span></li>
<li><span>20%</span></li>
<li><span>10%</span></li>
<li><span>0%</span></li>
</ul>
<ul id="bar">
<li><div></div><p></p><span>A</span></li>
<li><div></div><p></p><span>B</span></li>
<li><div></div><p></p><span>C</span></li>
<li><div></div><p></p><span>D</span></li>
<li><div></div><p></p><span>E</span></li>
<li><div></div><p></p><span>F</span></li>
<li><div></div><p></p><span>G</span></li>
</ul>
</div>
</body>
</html>
鼠标移入效果
