jQuery纵向柱状体样式投票代码

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

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

以下是 jQuery纵向柱状体样式投票代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery纵向柱状体样式投票代码</title>
<style type="text/css">
#VoteMain {
	width: 500px;
	height: 400px;
	margin: 0 auto;
	margin-top: 0px;
	padding: 20px 20px 20px 20px;
}
.VoteItem {
	width: 100px;
	height: 100%;
	border: 1px solid #efefef;
	float: left;
	margin-left: 20px;
}
.VoteValue {
	width: 50px;
	height: 100px;
	background-color: #f47920;
	margin: 0 auto;
	margin-bottom: 0px;
	border: 1px solid #fff;
}
.VoteItem:hover .VoteSpan {
	display: block;
}
.VoteValue:hover {
	-webkit-box-shadow: 0px 0px 5px #808080;
	-moz-box-shadow: 0px 0px 5px #808080;
	box-shadow: 0px 0px 5px #808080;
}
.VoteSpan {
	width: 80px;
	height: 30px;
	background-color: #000;
	float: left;
	margin-top: -38px;
	margin-left: -15px;
	text-align: center;
	line-height: 30px;
	color: #fff;
	text-align: center;
	position: relative;
	display: none;
}
.VoteImg {
	width: 60px;
	height: 60px;
	position: relative;
	-webkit-box-shadow: 0px 0px 5px #ccc;
	-moz-box-shadow: 0px 0px 5px #ccc;
	box-shadow: 0px 0px 5px #ccc;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	border: 2px solid #fff;
	margin: 0 auto;
	margin-left: 5px;
	margin-top: 10px;
	cursor: pointer;
}
.VoteImg:hover {
	border-color: #4e72b8;
	-webkit-box-shadow: 0px 0px 5px #444693;
	-moz-box-shadow: 0px 0px 5px #444693;
	box-shadow: 0px 0px 5px #444693;
}
.VoteText {
	font: 15px "微软雅黑", Arial, Helvetica, sans-serif;
	text-align: center;
	font-weight: 600;
	color: #333;
	line-height: 10px;
	margin-top: 5px;
}
.VoteSpanTri {
	position: absolute;
	width: 10px;
	height: 6px;
	background-image: url(tri.png);
	margin-top: 30px;
	margin-left: -15px;
}
</style>
</head>

<body>
<div id="Demo" style="text-align:center;">
  <div id="VoteMain"> </div>
</div>
<script src="js/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
	//$(".VoteValue").css("margin-top",$(this).hei
	Vote.Init();
});
var Vote={
	voteJson:[
	{Name:"LeeSin",Img:"images/LeeSin.png",Value:220},
	{Name:"Ahri",Img:"images/Ahri.png",Value:161},
	{Name:"Sona",Img:"images/Sona.png",Value:130},
	{Name:"JarvanIV",Img:"images/JarvanIV.png",Value:211}
	],
	Init:function(){
		for(var i=0;i<Vote.voteJson.length;i++){
			var mName=Vote.voteJson[i].Name;
			var mImg=Vote.voteJson[i].Img;
			var mValue=Vote.voteJson[i].Value;
			var VoteItem=$("<div></div>");
			VoteItem.attr("class","VoteItem");
			$("#VoteMain").append(VoteItem);
			
			var VoteImg=$("<img title=\"支持一下\" src=\""+mImg+"\" />");
			VoteImg.attr("class","VoteImg");
			VoteImg.click(function(){
				$(this).next().css("height",$(this).next().height()+1+"px");
				$(this).next().css("margin-top",300-20-$(this).next().height()+"px");
				$(this).next().find(".VoteSpan").html($(this).next().height());
				var VoteSpanTri=$("<span></span>");
			    VoteSpanTri.attr("class","VoteSpanTri");
			    $(this).next().find(".VoteSpan").append(VoteSpanTri);
			});
			VoteItem.append(VoteImg);

			var VoteValue=$("<div></div>");
			VoteValue.attr("class","VoteValue");
			VoteValue.css("margin-top",300-20-mValue+"px");
			VoteValue.animate({height:mValue+"px"},500);
			VoteItem.append(VoteValue);
			
			var VoteSpan=$("<div>"+mValue+"</div>");
			VoteSpan.attr("class","VoteSpan");
			VoteValue.append(VoteSpan);
			
			var VoteSpanTri=$("<span></span>");
			VoteSpanTri.attr("class","VoteSpanTri");
			VoteSpan.append(VoteSpanTri);
			
			
			var VoteText=$("<p></p>");
			VoteText.html(mName);
			VoteText.attr("class","VoteText");
			VoteItem.append(VoteText);
		}
	}
}
</script>
</html>

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