(usehost) Base de Conhecimentos :: Criando um gráfico animado com PHP e jQuery

Home | Sumário | Favoritos | Contato | Efetuar Login

Pesquisar na base de dados	Pesquisar por categoria
[Pesquisa avançada]

Criando um gráfico animado com PHP e jQuery

Detalhes do artigo

Última atualização
11th o June, 2010

Você também pode...

Imprimir

Enviar por E-mail

Comentar

Cadastre-me

Add aos favorito

Salvar em PDF

Opções de usuário (3 votos)

100%

Regular readers of Papermashup will have seen the post that I wrote last week on Easy Poll, the personal project that I launched a few weeks back that allows you to create a simple 2 answer poll that you can share and gather feedback on. You can read the post about it and check out easypoll.papermashup here I’d love to hear your feedback.

I thought i’d cover how to create a 3d animated poll using jQuery and CSS similar to the polls page on Easy Poll.

The Code

I don’t usually do this but here’s the complete code snippet so you can see the JavaScript CSS and HTML all in one space. most of the configuration is achieved thought the CSS but you’ll notice that on page load the bars animate to the correct height using the jQuery animate function which we’re passing a percentage height into.

<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>

Download: http://papermashup.com/demos/3d-poll/3d-poll.zip

Comentários

Não hpa comentários de visitantes. Comentar

(usehost) Hospedagem de Sites - Recife - PE (Hosting, E-mail Marketing, Comércio Eletrônico)

The Code