这个曲线动画的效果,是我投机取巧了,但是关键时刻还是挺管用的
<!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>
还有什么不足的地方,请大家多多指教