3D диаграмма для голосования
ИСХОДНИКИ
Код
В этом примере мы сразу же рассмотрим javascript CSS и HTML. Для анимации мы, конечно же, используем jQuery.
<head>
<style>
.rating {
float:left;
width:180px;
background-image:url(images/poll-bottom.png);
background-position:bottom left;
background-repeat:no-repeat;
padding-bottom:40px;
}
.graph {
float:left;
margin-top:10px;
position:relative;
height:380px;
padding:0;
}
.graph .bar1, .graph .bar2, .graph .bar3{
display:block;
position:absolute;
background-image:url(images/poll-body.png);
background-position:top left;
color:#fff;
width:159px;
min-height:70px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
line-height:1.9em;
bottom:0;
}
.graph .bar1 span, .graph .bar2 span, .graph .bar3 span {
position:absolute;
left:50px;
top:20px;
font-size:33px;
color:#333;
text-shadow:0 1px #fff;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.bar1').animate({'height':'22%'},500);
$('.bar2').animate({'height':'58%'},1000);
$('.bar3').animate({'height':'88%'},1500);
});
</script>
</head>
<body>
<div class="polls">
<div class="rating">
<div class="graph">
<strong class="bar1">
<span>22%</span>
</strong>
</div>
<div class="ans">Answer 1</div>
</div>
<div class="rating">
<div class="graph">
<strong class="bar2">
<span>58%</span>
</strong>
</div>
<div class="ans">Answer 2</div>
</div>
<div class="rating">
<div class="graph">
<strong class="bar3">
<span>88%</span>
</strong>
</div>
<div class="ans">Answer 3</div>
</div>
<div class="clear"></div>
</div>
</body>
<style>
.rating {
float:left;
width:180px;
background-image:url(images/poll-bottom.png);
background-position:bottom left;
background-repeat:no-repeat;
padding-bottom:40px;
}
.graph {
float:left;
margin-top:10px;
position:relative;
height:380px;
padding:0;
}
.graph .bar1, .graph .bar2, .graph .bar3{
display:block;
position:absolute;
background-image:url(images/poll-body.png);
background-position:top left;
color:#fff;
width:159px;
min-height:70px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
line-height:1.9em;
bottom:0;
}
.graph .bar1 span, .graph .bar2 span, .graph .bar3 span {
position:absolute;
left:50px;
top:20px;
font-size:33px;
color:#333;
text-shadow:0 1px #fff;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.bar1').animate({'height':'22%'},500);
$('.bar2').animate({'height':'58%'},1000);
$('.bar3').animate({'height':'88%'},1500);
});
</script>
</head>
<body>
<div class="polls">
<div class="rating">
<div class="graph">
<strong class="bar1">
<span>22%</span>
</strong>
</div>
<div class="ans">Answer 1</div>
</div>
<div class="rating">
<div class="graph">
<strong class="bar2">
<span>58%</span>
</strong>
</div>
<div class="ans">Answer 2</div>
</div>
<div class="rating">
<div class="graph">
<strong class="bar3">
<span>88%</span>
</strong>
</div>
<div class="ans">Answer 3</div>
</div>
<div class="clear"></div>
</div>
</body>