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

Сегодня мы покажем вам, как создать 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>

Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/GNy2YjaxacY/lessons.php

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

3D диаграмма для голосования | | 2012-06-19 12:07:21 | | Статьи Web-мастеру | | Сегодня мы покажем вам, как создать 3D диаграмму для голосования, которое вы можете внедрить на ваш сайт.В этом примере мы сразу же рассмотрим JavaScript CSS и HTML. Для анимации мы, конечно же, | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: