Autor Tema: [APORTE] Links con Degradado  (Leído 1000 veces)

Desconectado NDSi

  • PHPero Avanzado
  • ****
  • Mensajes: 410
  • Karma: 8
  • Sexo: Masculino
    • Ver Perfil
[APORTE] Links con Degradado
« en: 04 de Octubre de 2009, 10:36:20 am »
Hola a todos, encontre este codigo y la verdad ami me sirvio muchisimo, es una programita en Javascript que da degradado a los links (va en el head asi se aplica a toda la web).

Les dejo el codigo.

Código: [Seleccionar]
<html>
<head>
<title>Ejemplo</title>
<script language="javascript">

if(!window.JSFX)JSFX=new Object();

var LinkFadeInStep=20;
var LinkFadeOutStep=5;
[b]var LinkEndColor="00FF00"[/b]

var LinkStartColor="FFFFFF";
var LinkFadeRunning=false;

document.onmouseover = theOnOver;
document.onmouseout  = theOnOut;
if(document.captureEvents)
    document.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT);


function hex2dec(hex){return(parseInt(hex,16));}
function dec2hex(dec){return (dec < 16 ? "0" : "") + dec.toString(16);}
function getColor(start, end, percent)
{

var r1=hex2dec(start.slice(0,2));
var g1=hex2dec(start.slice(2,4));
var b1=hex2dec(start.slice(4,6));

var r2=hex2dec(end.slice(0,2));
var g2=hex2dec(end.slice(2,4));
var b2=hex2dec(end.slice(4,6));

var pc=percent/100;

var r=Math.floor(r1+(pc*(r2-r1)) + .5);
var g=Math.floor(g1+(pc*(g2-g1)) + .5);
var b=Math.floor(b1+(pc*(b2-b1)) + .5);

return("#" + dec2hex(r) + dec2hex(g) + dec2hex(b));
}

JSFX.getCurrentElementColor = function(el)
{
var result = LinkStartColor;

if (el.currentStyle)
result = (el.currentStyle.color);
else if (document.defaultView)
result = (document.defaultView.getComputedStyle(el,'').getPropertyValue('color'));
else if(el.style.color) //Opera
result = el.style.color;

if(result.charAt(0) == "#")      //color is of type #rrggbb
result = result.slice(1, 8);
else if(result.charAt(0) == "r") //color is of type rgb(r, g, b)
{
var v1 = result.slice(result.indexOf("(")+1, result.indexOf(")") );
var v2 = v1.split(",");
result = (dec2hex(parseInt(v2[0])) + dec2hex(parseInt(v2[1])) + dec2hex(parseInt(v2[2])));
}

return result;
}
JSFX.findTagIE = function(el)
{
      while (el && el.tagName != 'A')
            el = el.parentElement;
return(el);
}
JSFX.findTagNS= function(el)
{
      while (el && el.nodeName != 'A')
            el = el.parentNode;
return(el);
}
function theOnOver(e)
{
var lnk;
if(window.event)
lnk=JSFX.findTagIE(event.srcElement);
else
lnk=JSFX.findTagNS(e.target);

if(lnk)
JSFX.linkFadeUp(lnk);
}
JSFX.linkFadeUp = function(lnk)
{
if(lnk.state == null)
{
lnk.state = "OFF";
lnk.index = 0;
lnk.startColor = JSFX.getCurrentElementColor(lnk);
lnk.endColor = LinkEndColor;
}

if(lnk.state == "OFF")
{
lnk.state = "FADE_UP";
JSFX.startLinkFader();
}
else if( lnk.state == "FADE_UP_DOWN"
|| lnk.state == "FADE_DOWN")
{
lnk.state = "FADE_UP";
}
}
function theOnOut(e)
{
var lnk;
if(window.event)
lnk=JSFX.findTagIE(event.srcElement);
else
lnk=JSFX.findTagNS(e.target);

if(lnk)
JSFX.linkFadeDown(lnk);
}
JSFX.linkFadeDown = function(lnk)
{
if(lnk.state=="ON")
{
lnk.state="FADE_DOWN";
JSFX.startLinkFader();
}
else if(lnk.state == "FADE_UP")
{
lnk.state="FADE_UP_DOWN";
}
}
JSFX.startLinkFader = function()
{
if(!LinkFadeRunning)
JSFX.LinkFadeAnimation();
}

JSFX.LinkFadeAnimation = function()
{
LinkFadeRunning = false;
for(i=0 ; i<document.links.length ; i++)
{
var lnk = document.links[i];
if(lnk.state)
{
if(lnk.state == "FADE_UP")
{
lnk.index+=LinkFadeInStep;
if(lnk.index > 100)
lnk.index = 100;
lnk.style.color=getColor(lnk.startColor, lnk.endColor, lnk.index);

if(lnk.index == 100)
lnk.state="ON";
else
LinkFadeRunning = true;
}
else if(lnk.state == "FADE_UP_DOWN")
{
lnk.index+=LinkFadeOutStep;
if(lnk.index>100)
lnk.index = 100;
lnk.style.color=getColor(lnk.startColor, lnk.endColor, lnk.index);

if(lnk.index == 100)
lnk.state="FADE_DOWN";
LinkFadeRunning = true;
}
else if(lnk.state == "FADE_DOWN")
{
lnk.index-=LinkFadeOutStep;
if(lnk.index<0)
lnk.index = 0;
lnk.style.color=getColor(lnk.startColor, lnk.endColor, lnk.index);

if(lnk.index == 0)
lnk.state="OFF";
else
LinkFadeRunning = true;
}
}
}

if(LinkFadeRunning)
setTimeout("JSFX.LinkFadeAnimation()", 40);
}
</script></head>
<body>
<a href="http://phperos.net">Ejemplo</a><br>
<a href="http://phperos.net">Ejemplo</a><br>
<a href="http://phperos.net">Ejemplo</a><br>
<a href="http://phperos.net">Ejemplo</a><br>
<a href="http://phperos.net">Ejemplo</a><br>
<a href="http://phperos.net">Ejemplo</a><br>
</body>
</html>

var LinkEndColor="00FF00", 00FF00 es el valor del color que se tranforma el link al pasar el clic, se puede cambiar.
El codigo no es mio es de CodigodeFuenteya.

Saludos y espero que les alla servido.

Comunidad PHPeros

[APORTE] Links con Degradado
« en: 04 de Octubre de 2009, 10:36:20 am »

Desconectado TheGeorge

  • PHPero Avanzado
  • ****
  • Mensajes: 351
  • Karma: 13
  • Sexo: Masculino
    • Ver Perfil
    • websources
Re:[APORTE] Links con Degradado
« Respuesta #1 en: 15 de Octubre de 2009, 00:58:53 am »
Wow...  :o
Se ve muy cute xd!
Acá esta el enlace directo a este script click

Muy bueno.
¡Solo sé, que nada sé...!

Desconectado Masato

  • PHPero Avanzado
  • ****
  • Mensajes: 480
  • Karma: 12
  • Sexo: Masculino
  • <?php echo "Solo quiero aprender php"; ?>
    • Ver Perfil
    • Masato Design!
Re:[APORTE] Links con Degradado
« Respuesta #2 en: 15 de Octubre de 2009, 06:03:05 am »
Muy buen aporte amigo NDSi ^^

Desconectado gbelot2003

  • PHPerit@
  • *
  • Mensajes: 11
  • Karma: 0
  • Sexo: Masculino
    • Ver Perfil
Re:[APORTE] Links con Degradado
« Respuesta #3 en: 05 de Noviembre de 2009, 23:04:04 pm »
Esta exelente el aporte, muchas gracias... :star: :star: :star: :star: :star:
Tenemos la suerte de haber nacido en un tiempo, que muchos soñaron y otros creyeron imposible, Todo lo tenemos en la mano ( y el teclado) Bendita internet. 

Aprender ya no es un derecho, es una obligación.

Desconectado Siquillote

  • PHPero Master
  • ******
  • Mensajes: 4.229
  • Karma: 179
  • Sexo: Masculino
    • Ver Perfil
Re:[APORTE] Links con Degradado
« Respuesta #4 en: 07 de Noviembre de 2009, 10:13:44 am »
Excelente , esto no esque me sirva de mucho en estos momentos , pero cuando me sirva lo cogeré de aquí .  :star:

#Fdo. Physlet

Desconectado Masato

  • PHPero Avanzado
  • ****
  • Mensajes: 480
  • Karma: 12
  • Sexo: Masculino
  • <?php echo "Solo quiero aprender php"; ?>
    • Ver Perfil
    • Masato Design!
Re:[APORTE] Links con Degradado
« Respuesta #5 en: 07 de Noviembre de 2009, 19:04:17 pm »
Yo ando igual Siquillote, no me sirve de mucho (en realidad no uso muy sigo el JS) pero si es necesario lo voy a usar :P

Desconectado Siquillote

  • PHPero Master
  • ******
  • Mensajes: 4.229
  • Karma: 179
  • Sexo: Masculino
    • Ver Perfil
Re:[APORTE] Links con Degradado
« Respuesta #6 en: 08 de Noviembre de 2009, 14:23:10 pm »
Fuera de tema : Masato tu keko aumento muchisimo de nivel , la ultima vez que lo vi tenia un nivel de 300 O.o ahora tiene 502 :O

#Fdo. Physlet