• Revista PROGRAMAR: Já está disponível a edição #53 da revista programar. Faz já o download aqui!

tymonn

Barra de Loading com 2 imagens!

10 mensagens neste tópico

Boas,

estava a tentar criar uma barrinha de loading, com as seguintes 2 imagens:

percentImage.png

e

percentImage_back.png

a 1 imagem fica á frente, enquanto que a 2 imagem funciona como background, ou seja, só vamos ter que mexer no "background-position", ora mais pra esquerda ora mais para a direita para que a barra indique a percentagem correcta.

eu sei que a imagem de trás tem 243px de width

e a da frente tem 123px de width

O meu raciocínio foi:

-61.21 px    =    49 %

$COOR px  =    $PERC %

logo

$COOR = ( $PERC * 49 ) / -61.21 ;

o problema é que isto por mais voltas que dê, nao consigo por a funcionar correctamente,

sinto que isto é muito fácil e que a resposta está mesmo á minha frente mas não estou mesmo a ver!

Desde já o meu Obrigado :P

fiz um form para testar o funcionamento (código encontra-se abaixo)

http://siegewar.net/loading.php

CSS:

img.percentImage {
background: white url(percentImage_back.png) top left no-repeat;
padding: 0;
margin: 5px 0 0 0;
background-position: 1px 0;
}

loading.php

<html>

<head>
<title>loading bar test</title>
<!-- css -->		
<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
<fieldset>
<legend>Insert Percentage</legend>
<form method="post" action="">
<input type="text" name="percentagem" /><input type="submit" name="sub" value="submit" /></form>
</fieldset>
<div style="padding:50 50">
<?php 


if ( isset ( $_POST['sub'] ) )
{
$PERC = $_POST['percentagem'];
echo "<b>$PERC</b>%     =    ";
}
else
{
$PERC = 0;
echo "nao clicaste";
}	


$COOR = ( $PERC * 49 ) / -61.21  ;


echo "<b>$COOR</b> px<br><br>";
echo '<img title= "'.$PERC.'%" src="percentImage.png" class="percentImage" style="background-position: '.$COOR.'px 0pt;" />';
?>
</div>
</body>
</html>

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Não consegui perceber o que queres fazer e o que não consegues fazer... explica melhor

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

ora bem:

0% = 0px

100% = 120px

Numa regra de 3 simples:

12%  ----  x

100% ---- 120px

x = (120*12)/100

(o 12% é a percentagem que queres saber)

em PHP:

$percertagem = 12; // = 12% na regra acima
$pxtotais = 120; // = os 120px acima que equivalem aos 100%
$tamanhobar = 123; // = pxs da barra que temos de saltar

$x = ($percentagem*$pxtotais)/100; // = x na regra anterior

$pos = $tamanhobar - $x; // = posicao na imagem onde se comeca a ver

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Não consegui perceber o que queres fazer e o que não consegues fazer... explica melhor

A ideia é construir uma função que me dê em função da percentagem que quero, as coordenadas que sao precisas para que a imagem enterprete o resultado da função

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Experimenta o código que te pus acima. Altera as 1ªs 3 variáveis convenientemente e usa como $COOR o $pos :P

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Experimenta o código que te pus acima. Altera as 1ªs 3 variáveis convenientemente e usa como $COOR o $pos :P

Obrigada por teres respondido, mas se calhar não entendeste bem :)

a imagem tem que andar para trás porque 0px = 100%

quando anda para o lado negativo, vai baixando os 100%

0% = -123px

Obrigada :D

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Se o código que eu pus não deu, experimenta:

$pos = $tamanhobar + $x;

Se não der, estou a ficar "xéxé" :P

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Não consegui perceber o que queres fazer e o que não consegues fazer... explica melhor

A ideia é construir uma função que me dê em função da percentagem que quero, as coordenadas que sao precisas para que a imagem enterprete o resultado da função

Se o código que eu pus não deu, experimenta:

$pos = $tamanhobar + $x;

Se não der, estou a ficar "xéxé" :)

Este código ainda avança mais o background :D

quando que tudo o que ele devia fazer era andar para trás x)

Estamos os 2 a ficar xéxé's loool.

Mas eu SINTO que a solução é TÂO fácil e nós estamos aqui ás aranhas xD

Obrigado por estares a ajudar :P

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Define a var $tamanhobar com o valor do 0%. Como queres andar para a esquerda, o $pos vai ser esse valor - o x:

$tamanhobar = 20; // Isto se o 0% for nos 20%

$pos = $tamanhobar - $x; // e é isto 

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Define a var $tamanhobar com o valor do 0%. Como queres andar para a esquerda, o $pos vai ser esse valor - o x:

$tamanhobar = 20; // Isto se o 0% for nos 20%

$pos = $tamanhobar - $x; // e é isto 

Também não resultou!

Mas finalmente!!!! CONSEGUI! :D

Abordei o problema por outro angulo, estava a ver que isto da regra de 3 simples.. nao tava a dar resultado

cada pixel sao 120/100 = 1.2px

se o 0% está no -120px

$coor = -120 + ( $percentam * 1.2 );

Tão simples como isto, eu bem estava a ver que a resposta era tão simples que até fazia impressao xD

O meu grande obrigada por teres tentado :P

Abraço, qualquer coisa apita :)

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Crie uma conta ou ligue-se para comentar

Só membros podem comentar

Criar nova conta

Registe para ter uma conta na nossa comunidade. É fácil!


Registar nova conta

Entra

Já tem conta? Inicie sessão aqui.


Entrar Agora