jQuery仿搜狐辩论投票动画代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery仿搜狐辩论投票动画代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery仿搜狐辩论投票动画代码</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />

</head>
<body>

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	var a = 500;
	var b = 130;
	$("#white").animate({ width: 0,left:"250px"}, 1000 ,function(){
		$("#vs").fadeIn("slow",function(){
			$("#all").html(a+b);$("#aa").html(a);$("#bb").html(b);
			var newLeft = a/(a+b)*500-20 + "px"; //20为vs 的一半
			$("#vs").animate({left:newLeft}, 1000);
			$("#red").animate({width:newLeft}, 1000);
		});
	});
});
</script>

<div id="box_bg">
	<div id="container">
		<div id="green" class="line"></div>
		<div id="red" class="line"></div>
		<div id="white" class="line"></div>
		<div id="vs"></div>
	</div>
</div>

<div style="width:440px; margin:0px auto;">
	<div id="aa2" class="scope">正方<span id="aa"></span>票</div>
	<div id="bb2" class="scope">反共<span id="bb"></span>票</div>
	<div id="all2" class="scope">总共<span id="all"></span>票</div>
</div> 
</body>
</html>

CSS代码(style.css):

@charset "utf-8";body{font-size:12px;color:#666}
#box_bg{width:440px;height:10px;background:url(../images/bg.gif) no-repeat;padding:24px 48px;margin:0px auto;}
#container{height:10px;position:relative;}
.line{height:10px;position:absolute;}
#white,#green{width:100%;}
#green{background:url(../images/green.gif) repeat-x #00FF00;height:10px;}
#red{background:url(../images/red.gif) repeat-x #FF0000;height:10px;width:50%;}
#white{background-color:#fff}
#vs{width:40px;height:40px;background:url(../images/vs.gif) no-repeat;line-height:40px;text-align:center;position:absolute;left:205px;top:-10px;display:none}
.scope{height:24px;text-align:center;}
.scope span{color:#FF3300;font-weight:bold;padding:0px 5px;}
#all2{margin:0 auto}
#aa2{float:left}
#bb2{float:right}

附件:下载该文件资源,减少时间成本(增值服务)