<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
body{
background-color: #eee;
}
.max-box{
300px;
height: 25px;
background-color: #fff;
border-radius: 50px;
border: 1px solid #ccc;
margin:10px auto;
position: relative;
overflow: hidden;
}
.min-box{
position: absolute;
top:0;
background-color: yellow;
height: 14px;
0%;
border-radius: 50px;
border: 1px solid #ccc;
padding: 5px;
}
.vote{
300px;
margin:50px auto;
}
.percent{
300px;
margin:0 auto;
margin-top: 50px;
text-align: center;
}
.vote p{
float: left;
150px;
cursor: pointer;
}
.vote-x{
text-align: right;
}
</style>
</head>
<body>
<div class="percent"><span class="figure">0</span> <i>%</i></div>
<div class="max-box">
<div class="min-box">
</div>
</div>
<div class="vote">
<p class="vote-v">支持</p>
<p class="vote-x">反对</p>
</div>
</body>
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
(function () {
$(".vote-v").click(function () {
var $stripBox = $('.min-box');
var $stripW = $('.min-box').width();
var $num = 30;
var $figure = $('.figure').text();//百分数统计
var $figureR = $('.figure');
var $stripnum = $stripW+ $num +'px';
var $figureNum = parseInt($figure)+10;
$figureR.text($figureNum);
if($stripW >= 300){
$figureR.text(100);
}else {
$stripBox.css({
'width': $stripnum
});
}
});
$(".vote-x").click(function () {
var $stripBox = $('.min-box');
var $stripW = $('.min-box').width();
var $num = 30;
var $stripnum = $stripW- $num +'px';
var $figure = $('.figure').text();//百分数统计
var $figureR = $('.figure');
var $figureNum = parseInt($figure)-10;
$figureR.text($figureNum);
if($stripW <= 20){
$figureR.text(0);
}else {
$stripBox.css({
'width': $stripnum
})
}
});
})();
</script>
</html>