jQuery实现网页投票页面_js投票插件代码下载

现在Web版本的投票已经做得风声水起了、下面分享一款jQuery纵向柱状体样式的投票代码、Demo是一款简单的网站投票特效的源代码、投票的时候具有动画效果、非常简约、下面是效果图

JS Vote申明代码

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

jQuery调用代码

$(document).ready(function(e) {
    //$(".VoteValue").css("margin-top",$(this).hei
    Vote.Init();
});

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

jQuery投票插件源代码下载链接: html网页投票代码 密码: bwuc