Ir para conteúdo
Fórum Script Brasil
  • 0

Menu com zoom gradual!

Matheus Matos

Perguntado por Matheus Matos,

 Share

Pergunta

Matheus Matos

Matheus Matos

Postado
Postado (editado)

Bem galera vi um menu bem legal na net, o desse site.

ora, fuçando na net achei os códigos para a criação de um menu igual a esse

é, eles são parecidos, mas não totalmente iguais, o do primeiro link, a imagem cresce vindo pra frente, e no segundo link, ele cresce indo pra cima ceilá, só sei que é diferente...

eu tenho o código fonte do segundo menu, que é o debaixo:

<html>
<head>
<title>Menu legal com zoom gradual</title>

<style type="text/css"> 
        html {
                overflow: hidden;
        }
        body {
                background: #fff;
                width: 98%;
                height: 100%;
        }
        #dock {
                position: absolute;
                bottom: 1em;
                width: 100%;
                text-align: center;
                left: 0px;
        }
        #dock a:visited{
                text-decoration: none;
        }
        #dock a{
                text-decoration: none;
                margin: -2px;
        }
        #dock img {
                border: none;
                width: 0px;
        }
        #legend {
                position: absolute;
                bottom: 0px;
                width: 100%;
                text-align: center;
                font-family: arial;
                font-weight: bold;
                font-size: 1em;
                color: #000;
        }
</style>

<script type="text/javascript">

var xm = xmb = ov = 0;
var M = true;

function dock(dock, sMin, sMax)
{
        this.icons = document.getElementById(dock).getElementsByTagName('img');
        this.N = this.icons.length;
        this.s = sMin;
        this.ovk = 0;
        this.pxLeft = function(o)
        {
                for(var x=-document.documentElement.scrollLeft; o != null; o = o.offsetParent) x+=o.offsetLeft;
                return x;
        }
        for(var i=0;i<this.N;i++)
        {
                with(this.icons[i])
                {
                        style.width = sMin+"px";
                        style.height = sMin+"px";
                        className = "dockicon";
                }
        }
        this.run = function()
        {
                with(this)
                {
                        for(var i=0;i<N;i++)
                        {
                                var o = icons[i];
                                var W = parseInt(o.style.width);
                                if(ov && ov.className=="dockicon")
                                {
                                        if(ov!=ovk)
                                        {
                                                ovk=ov;
                                                document.getElementById("legend").innerHTML = ov.lang;
                                        }
                                        if(M) W = Math.max((s*Math.cos(((pxLeft(o)+W/2)-xm)/sMax)),sMin);
                                        s = Math.min(sMax,s+1);
                                }
                                else
                                {
                                        s = Math.max(s-1,sMin);
                                        W = Math.max(W-N,sMin);
                                }
                                o.style.width = W+"px";
                                o.style.height = W+"px";
                        }
                        if(s >= sMax) M = false;
                }
        }
}
document.onmousemove = function(e)
{
        if(window.event) e=window.event;
        xm = (e.x || e.clientX);
        if(xm!=xmb){
                M = true;
                xmb = xm;
        }
        ov = (e.target)?e.target:((e.srcElement)?e.srcElement:null);
}
window.onload = function()
{
        dock = new dock("dock", 48, 128);
        setInterval("dock.run()", 16);
}
//--> 
</script>
</head>
<body>
<div id="dock"> 
        <a href="http://www.dhteumeuleu.com/" target="_blank"><img src="../images/Home.gif" lang="Home"></a> 
        <a href="http://www.kalifrogz.net/" target="_blank"><img src="../images/My Computer.gif" lang="My Computer"></a> 
        <a href="http://www.marathon-medoc.com/marathon-fun-medoc-2.html" target="_blank"><img src="../images/Books.gif" lang="Files"></a> 
        <a href="http://ecolejda.org/" target="_blank"><img src="../images/Applications.gif" lang="Applications"></a> 
        <a href="http://www.kentdesign1.com/art/picture_gallery/gallery_experiments.html" target="_blank"><img src="../images/Chat.gif" lang="Chat"></a> 
        <a href="http://www.armenweb.org/dhteumeuleu/5.htm" target="_blank"><img src="../images/Sound App.gif" lang="Sound"></a> 
        <a href="http://www.myartonair.com/2.htm" target="_blank"><img src="../images/Printers.gif" lang="Printers"></a> 
        <a href="http://www.mafra.fot.br/" target="_blank"><img src="../images/Trash Full.gif" lang="Trash"></a> 
        <a href="http://www.z-mation.com/grumpsopt.html" target="_blank"><img src="../images/Help.gif" lang="Help"></a> 
</div> 
<div id="legend"></div>
</body>
</head>
</html>

é o seguinte, mudando esse código é possível fazer com que a imagem cresça pra frente? igual ao do primeiro? Acho que pra fazer o que eu quero tenho que mudar o css, tem algum "ceéssiano" de plantão aí que possa me ajudar?

Vlw Galera!

Editado por Matheus Matos
Link para o comentário
Compartilhar em outros sites

2 respostass a esta questão

Posts Recomendados

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.

×
 Share
Ir para lista de Perguntas


  • Estatísticas dos Fóruns

    • Tópicos
      152,5k
    • Posts
      652,4k
×
×
  • Criar Novo...