这个曲线动画的效果，是我投机取巧了，但是关键时刻还是挺管用的
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>曲线动画</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
</head>
<style>
.xian_animate {
750px;
margin: 0 auto;
height: 359px;
background: url(img/wang.png);
position: relative;
}
.zi {
position: absolute;
height: 30px;
font-size: 30px;
color: #666;
display: none;
color: #000;
}
.zi_1 {
left: 30px;
top: 45px
}
.zi_2 {
left: 103px;
top: 208px
}
.zi_3 {
left: 270px;
top: 45px
}
.zi_4 {
left: 342px;
top: 312px
}
.zi_5 {
left: 578px;
top: 95px
}
.xian {
margin-top: 73px;
}
</style>
<body>
<div class="xian_animate" style="">
<div class="blue_xian" style="overflow: hidden;">
<img src="img/blue_xian.png" alt="" class="xian">
</div>
<div class="zi zi_1" style="display: block;">盈利动力</div>
<div class="zi zi_2" style="display: none;">主力资金</div>
<div class="zi zi_3" style="display: none;">事件驱动</div>
<div class="zi zi_4" style="display: none;">相对估值</div>
<div class="zi zi_5" style="display: none;">市场强度</div>
</div>
<script type="text/javascript">
//曲线图的动画。
function xian_animate() {
$(".blue_xian").css('width', '0');
$(".blue_xian").animate({
"15%"
}, 600, "", function() {
$('.zi_1').fadeIn();
});
$(".blue_xian").animate({
"25%"
}, 600, "", function() {
$('.zi_2').fadeIn();
});
$(".blue_xian").animate({
"35%"
}, 600, "", function() {});
$(".blue_xian").animate({
"45%"
}, 600, "", function() {
$('.zi_3').fadeIn();
});
$(".blue_xian").animate({
"55%"
}, 600, "", function() {
$('.zi_4').fadeIn();
});
$(".blue_xian").animate({
"65%"
}, 600, "", function() {
});
$(".blue_xian").animate({
"75%"
}, 600, "", function() {
});
$(".blue_xian").animate({
"85%"
}, 600, "", function() {
$('.zi_5').fadeIn();
});
$(".blue_xian").animate({
"100%"
}, 600, "", function() {
$(".blue_xian").css('width', '0');
$('.zi').hide();
xian_animate();
});
}
xian_animate();
</script>
</body>
</html>
还有什么不足的地方，请大家多多指教