JavaScript - Gradiente que sube y baja en función de un valor

   
Vista:

Gradiente que sube y baja en función de un valor

Publicado por Miguel (2 intervenciones) el 17/12/2013 09:51:36
Hola a todos,

Quiero realizar con javascript lo siguiente:

Tengo un valor que va cambiando, en una escala de 0-100. Quiero representar ese valor con una barra de gradiente, la barra sera más larga cuanto mas se acerque a 100, hasta llegar al tamaño establecido. Me da igual como implementarlo, lo quiero hacer de la forma más sencilla posible. La idea creo que es usar dos imagenes que representen la barra de gradiente (una barra blanca y la otra con los colores del gradiente). La barra gradiente se va superponiendo a la blanca cuanto mayor sea mi valor. Pero no tengo claro como implementarlo.

¿Como lo veis? ¿Alguna sugerencia?

Gracias y un saludo
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de Jose maria

Gradiente que sube y baja en función de un valor

Publicado por Jose maria (9 intervenciones) el 17/12/2013 11:54:08
Hola Miguel:

Para hacer lo que quieres tienes la propiedad de CSS clip:rect()

Su implementación en javascript la define muy bien http://www.w3schools.com/jsref/prop_style_clip.asp

Yo lo tengo implementado mediante dos <div>. El primero me define la posición relativa donde lo quiero ubicar y el segundo, necesariamente, ha de ser absoluta para que corte la imagen donde quieres.
1
2
3
4
5
<div style="position:relative;">
  <div style="position:absolute;clip:rect(0px,60px,200px,0px)">
    <img src="img/iconos/escala-color.png" alt="Escala Color">
  </div>
</div>


Personalmente me olvidaría de la imagen en blanco (podrías darle un fondo blanco simplemente pero no lo he probado) y trabajo con la imagen en color. y la propiedad clip:rect()

La complejidad mayor la vas a tener en pasar de forma variable los valores internos de la propiedad.

El resultado (en horizontal) puede ser algo parecido a la imagen que adjunto (se trata de ver la carga de vehículos según envíos y los valores están recogidos desde suma de campos en la base de datos: lo más complejo es, como dije, recoger los datos y hacerlos porcentuales y variables):
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Gradiente que sube y baja en función de un valor

Publicado por Miguel (2 intervenciones) el 17/12/2013 13:09:57
Hola Jose Maria,
lo primero, gracias por tu respuesta.

Los valores los recibo ya en porcentajes de forma correcta. Solo tengo que representar el porcentaje con la barra.

No entiendo muy bien esa solución. Supongamos que tengo que representar un valor del 60%. ¿Como lo represento? Hay que tener en cuenta que ese valor no es estático, lo capturo de una base de datos y se refresca cada cierto tiempo.

Sólo con CSS, como tu propones, me parece que no se puede hacer. Hay que recurrir a JavaScript.

Un saludo
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Jose maria

Gradiente que sube y baja en función de un valor

Publicado por Jose maria (9 intervenciones) el 17/12/2013 13:25:45
Tienes que tener en cuenta el tamaño de tu imagen en píxeles y pasar esos valores dentro de clip:rect([arriba]px,[derecha]px,[abajo]px,[izquierda]px)

Generalmente dos valores irán a 0px.

En mi caso (el de la imagen) en horizontal, la imagen total (para el 100%) tiene 15 px de alto y 200px de ancho:

1
2
3
<div style="position:absolute;clip:rect(0, '.<?php echo $mivaribleporcentual * 2; ?>.'px, 15px, 0);">
  <img src="ruta/de/imagen.png" alt="Escala Color">
</div>>

Creo que se entiende que la variable en PHP la multiplico por 2 porque el valor 100 tendrá 200px. Si estoy indicando un 60% la imagen se mostrará desde la posición 0 a la izquierda y cortada a los 120px de su ancho.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Jose maria

Gradiente que sube y baja en función de un valor

Publicado por Jose maria (9 intervenciones) el 17/12/2013 19:56:58
Quería ampliar mi contestación anterior. Me decías:
Sólo con CSS, como tu propones, me parece que no se puede hacer. Hay que recurrir a JavaScript.

No soy amigo de librerías para una sola imagen. Seguro que existen. Pero personalmente evito la jQuerydependencia y otras fórmulas que cargan peso innecesario a las páginas.

Si te fijas en el enlace de mi primera intervención (w3schools.com y su área de pruebas) lo que javascript hace no es sino configurar el estilo
1
document.getElementById("img1").style.clip="rect(0px 75px 75px 0px)";

La inserción de tu variable "cambiante" será mediante el mismo procedimiento (claro que en javascript) pero si la recibes desde PHP/MySQL tendrías que hacer un <input type=hidden> para recoger la variable, y mi comentario anterior es más simple.

Nos cuentas.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar