Проверено

VDS-хостинг - именно на этом хостинге работает наш сайт.
Sape - биржа временных ссылок, доход 80р/день.
Trustlink - биржа временных ссылок, доход 60р/день.
Telderi - здесь покупаю сайты для дальнейшего заработка.

Партнеры

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>

Другие новости по теме: