Jump to content

Barra de Loading com 2 imagens!


tymonn
 Share

Recommended Posts

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 😛

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>
Link to comment
Share on other 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

Não peças ajuda por PM! A tua dúvida vai ter menos atenção do que se for postada na secção correcta do fórum!

Link to comment
Share on other 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

Link to comment
Share on other sites

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

Não peças ajuda por PM! A tua dúvida vai ter menos atenção do que se for postada na secção correcta do fórum!

Link to comment
Share on other sites

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

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 😄

Link to comment
Share on other sites

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

$pos = $tamanhobar + $x;

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

Não peças ajuda por PM! A tua dúvida vai ter menos atenção do que se for postada na secção correcta do fórum!

Link to comment
Share on other 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 😄

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 😛

Link to comment
Share on other 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 

Não peças ajuda por PM! A tua dúvida vai ter menos atenção do que se for postada na secção correcta do fórum!

Link to comment
Share on other 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! 😄

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 😛

Abraço, qualquer coisa apita 🙂

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.