Интересное

Проверено

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

Партнеры

Последние сообщения с форума

Название темы Автор Статистика Последнее сообщение
продажа аккаунтов разных сервисов

Тема в разделе: Услуги и сервисы ваших web-сайтов

Sdelkin

Просмотров: 179175

Ответов: 26

Автор: Sdelkin

3-02-2018, 18:55

хостинг от M-HOSTER

Тема в разделе: Хостинг

wmmax

Просмотров: 57616

Ответов: 0

Автор: wmmax

1-02-2018, 15:42

Комплексное продвижение (прогон) сайтов ру и en

Тема в разделе: Поисковая оптимизация

Kysovue

Просмотров: 141972

Ответов: 73

Автор: Kysovue

25-01-2018, 21:16

Special offer! SSD NVMe хостинг, Выделенный сервер и VPS SSD

Тема в разделе: Хостинг

iphoster

Просмотров: 61097

Ответов: 0

Автор: iphoster

10-11-2017, 22:56

продвижение сайтов, прогоны

Тема в разделе: Поисковая оптимизация

brig2

Просмотров: 77530

Ответов: 7

Автор: brig2

5-11-2017, 14:00

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>

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