曲线动画

最新推荐文章于 2024-11-22 18:28:21 发布

weixin_34347651

最新推荐文章于 2024-11-22 18:28:21 发布

阅读量165

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/alizhi/p/9172340.html

这个曲线动画的效果，是我投机取巧了，但是关键时刻还是挺管用的

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>曲线动画</title>
		<script type="text/javascript" src="js/jquery.min.js"></script>
	</head>
	<style>
		.xian_animate {
			width: 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({
					width: "15%"
				}, 600, "", function() {
					$('.zi_1').fadeIn();
				});
				$(".blue_xian").animate({
					width: "25%"
				}, 600, "", function() {
					$('.zi_2').fadeIn();
				});
				$(".blue_xian").animate({
					width: "35%"
				}, 600, "", function() {});
				$(".blue_xian").animate({
					width: "45%"
				}, 600, "", function() {
					$('.zi_3').fadeIn();
				});
				$(".blue_xian").animate({
					width: "55%"
				}, 600, "", function() {
					$('.zi_4').fadeIn();
				});
				$(".blue_xian").animate({
					width: "65%"
				}, 600, "", function() {

				});
				$(".blue_xian").animate({
					width: "75%"
				}, 600, "", function() {

				});
				$(".blue_xian").animate({
					width: "85%"
				}, 600, "", function() {
					$('.zi_5').fadeIn();
				});
				$(".blue_xian").animate({
					width: "100%"
				}, 600, "", function() {
					$(".blue_xian").css('width', '0');
					$('.zi').hide();
					xian_animate();
				});
			}
			xian_animate();
		</script>
	</body>
</html>

　　还有什么不足的地方，请大家多多指教

转载于:https://www.cnblogs.com/alizhi/p/9172340.html