3D диаграмма для голосования

Сегодня мы покажем вам, как создать 3D диаграмму для голосования, которое вы можете внедрить на ваш сайт.

ИСХОДНИКИ

Прикреплённые файлы:
Файл: demo3.zip
Размер: [4,66 Kb] (забрали: 9 раз)

Код

В этом примере мы сразу же рассмотрим 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>