html选美投票,Html投票插件

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

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

}

}

}