先上效果图
样式写的不是太好,具体根据需求来设计
以下是html/css部分
<style type="text/css">
body{background:lightblue;}
.vip li{width: 400px;height: 50px;background: white;list-style: none;margin-top: 50px;line-height: 50px;border-radius: 3px;padding-left: 10px;}
.vip li span:nth-of-type(1){width: 100px;height: 20px;border: 1px solid black;background: lightgrey;display: inline-block;vertical-align: middle;margin-left: 40px;position: relative;}
.vip li span a{height: 100%;background: red;position: absolute;left: 0;top: 0;}
.vip li button{border: none;box-shadow: 1px 3px 3px lightsteelblue;background: rgb(217,0,0);border-radius: 30px;height: 30px;color: white;margin-left: 30px;outline: none;}
.vip li button:hover{background: rgb(217,0,0);}
</style>
<body>
<ul class="vip">
<li>
免费云播空间
<span><a href=""></a></span>
<button>投一票</button>
<span>0%</span>
</li>
<li>
连续包月优惠
<span><a href=""></a></span>
<button>投一票</button>
<span>0%</span>
</li>
<li>
免费游戏礼包
<span><a href=""></a></span>
<button>投一票</button>
<span>0%</span>
</li>
<li>
丰富购物礼包
<span><a href=""></a></span>
<button>投一票</button>
<span>0%</span>
</li>
</ul>
</body>
前面的结构就没什么好说的了,下面是js部分
<script>
var sum = 100 // 总票数
$('.vip li button').click(function(){
// console.log($(this).siblings('span').find('a').text())
if(sum == 0){
alert("投票已结束")
return;
}
//当票数为0时点击无效 为0时表示4个投票系统加起来已经100%所有人已经投完票 可以根据实时人数来决定
sum -= 1;//点击减票数
var liw = $(this).siblings('span').find('a').width();//获取当前a标签的宽度
liw += 1; //点击加1 添加背景的宽度;
console.log(liw,sum)
var index = $(this).parent().index('.vip li');
$(this).parent().find('span:nth-of-type(2)').text(liw+"%") //显示点击一次所占总百分比的比例 如果人数不是100个人可以根据实际需求
$('.vip li').eq(index).find('a').animate({width:liw+"px"},50,"linear") //添加投票条的长度
})
</script>
本人水平有限,如有纰漏请指出。。多多指教