Jump to content
Fórum Script Brasil
  • 0

Para quem interessar


marcos_804

Question

Pessoal, através de algumas ideias desenvolvi um menu que tem um estilo "Flash" na hora de transição de cores.

Estou passando o codigo. Caso queiram utilizar, sintam-se à vontade.

/*INICIO DE MENU GRADATIVO*/

var maxPassos = 10;
var corIni = new Array(51,51,51);
var corFim = new Array(140,140,140);
var gambiarra = "rgb("+ corIni +")";


var idMenu = ""; var timer = "";

function mudaMenu(idMenuOver,posPassoAtual){

    idMenu = (idMenu == "") ? idMenuOver : idMenu;
    posPassoAtual = (typeof(posPassoAtual) == 'undefined') ? 1 : posPassoAtual;

    if(posPassoAtual < maxPassos){
        posPassoAtual++;
        timer = setTimeout("mudaMenu('"+ idMenuOver +"','"+ posPassoAtual +"')",20);
    }


    document.getElementById(idMenuOver).style.backgroundColor = criaRGB(posPassoAtual);
}

function mudaMenuOff(){
    document.getElementById(idMenu).style.backgroundColor = "rgb("+ corIni[0] +", "+ corIni[1] +", "+ corIni[2] +")";
    idMenu = "";
    clearTimeout(timer);
}

function criaRGB(posPassoAtual) {

  var cor_criada=new Array(3)
  var tipo_cor;

  for(i=0;i<3;i++) {

    var tipo_cor = (corIni[i]-corFim[i]);
    cor_criada[i] = (tipo_cor > 0) ? cor_criada[i] = corIni[i]-(Math.round((tipo_cor/maxPassos))*posPassoAtual) : corIni[i]+(Math.round((Math.abs(tipo_cor)/maxPassos))*posPassoAtual);

  }

return ("rgb("+ cor_criada[0] +", "+ cor_criada[1] +", "+ cor_criada[2] +")");

}

/*FIM DE MENU QUE MUDA GRADATIVO*/
E para mostrar o menu faça assim:
<a href="#" id="menu1" onmouseover="mudaMenu(this.id)" onmouseout="mudaMenuOff();"> Home</a>
<a href="#" id="menu2" onmouseover="mudaMenu(this.id)" onmouseout="mudaMenuOff();"> Discografia</a>
<a href="#" id="menu4" onmouseover="mudaMenu(this.id)" onmouseout="mudaMenuOff();"> Contato</a>
<a href="#" id="menu6" onmouseover="mudaMenu(this.id)" onmouseout="mudaMenuOff();"> Fotos</a>

Espero que ajude. falou Até mais.

Link to comment
Share on other sites

2 answers to this question

Recommended Posts

  • 0

Nossa cara que legal !!!

você fez isso sozinho ??

Posso dar uma sugestão ?

Tente implementar esse seu código de forma que tenha parâmetros, onde a pessoa escolhe a cor que vai começar e a cor que vai terminar, sem precisar mexer no código, apenas colocando parâmetros.

Se puder também implementar de forma que a pessoa não precise colocar no código html seria legal também, você treinaria usar javascript não-obstrutivo e poderia pensar em criar sua mini-biblioteca com outros efeitos que venha a desenvolver. Fazendo dessa forma, seu código ficaria bem genérico e bastaria apenas incluir em outro código que execute outras funções agregando essas novas.

AHhh...coloque seus dados, nome, email etc no início do código, ainda que deixe disponível para qualquer um usar, é interessante todos saberem quem o fez.

Muito Legal!

Link to comment
Share on other sites

  • 0

Ficou muito bacana mesmo!!!!!

Até já estou mexendo um pouco...

Mudei uma coisa, no onMouseOver, pra ficar sem cor de fundo, senão pode descaracterizar a página, dependendo da situação, por exemplo se o link estiver sobre um fundo degradê e só quisermos dar um destaque...

ficou assim:

function mudaMenuOff(){
    document.getElementById(idMenu).style.backgroundColor = "";
    idMenu = "";
    clearTimeout(timer);
}

E uma coisa que achei interessante pra complementar a sugestão do Kakarotto é ao invés de usar RGB, fazer por referência haxedecimal, nesse link tem uma Tabela de cores completinha, já ficam umas opções pré-definidas, pois por RGB são enézimas combinações... :P

Vlew

Abraços

Flow

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.



  • Forum Statistics

    • Total Topics
      152.1k
    • Total Posts
      651.8k
×
×
  • Create New...