Html多组合投票插件，初始化时只需要传入Json格式的数据，点击图标自动 1。可以通过修改CSS代码来自定义样式，颜色值等等。示例演示在底部。
CSS：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
|
#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:
|
1
|
<div id="VoteMain"> </div>
|
Javascript:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
|
$(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=$("<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);
}
}
}
|
