Html多组合投票插件，初始化时只需要传入Json格式的数据，点击图标自动 1。可以通过修改CSS代码来自定义样式，颜色值等等。示例演示在底部。

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;
}

HTML:

Javascript:

$(document).ready(function(e) {
	//$(".VoteValue").css("margin-top",$(this).hei
	Vote.Init();
});
var Vote={
	voteJson:[
	{Name:"LeeSin",Img:"LeeSin.png",Value:220},
	{Name:"Ahri",Img:"Ahri.png",Value:161},
	{Name:"Sona",Img:"Sona.png",Value:130},
	{Name:"JarvanIV",Img:"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=$("");
			VoteItem.attr("class","VoteItem");
			$("#VoteMain").append(VoteItem);
			
			var VoteImg=$("[object Object]");
			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=$("");
			    VoteSpanTri.attr("class","VoteSpanTri");
			    $(this).next().find(".VoteSpan").append(VoteSpanTri);
			});
			VoteItem.append(VoteImg);

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