menu flotante efecto ascensor

wolfmoon · #1 (**permalink**) 10/10/2009, 06:42

Bueno pues me gustaria saber como hacer el efecto del menu de esta web:

http://www.dr84.com/

Estuve mirando en san google y solo encuentro informacion de como dejar fija una capa, pero no encuentro nada sobre como poder hacer para que baje igual que el de esa pagina.

Gracias

Adler · #2 (**permalink**) 10/10/2009, 06:59

Hola

Aquí encontrarás lo que buscas

Suerte

wolfmoon · #3 (**permalink**) 10/10/2009, 07:35

Muchas gracias, llevaba horas buscando algo asi macho jeje... te debo una...

wolfmoon · #4 (**permalink**) 10/10/2009, 07:48

Una duda, al poner el doctype con la URI me deja de funcionar:

Asi me funciona:

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Asi no:

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Hay alguna diferencia? Nunca he entendido estas declaraciones...

zerokilled · #5 (**permalink**) 10/10/2009, 08:04

indica con cual script te deja de funcionar.

Adler · #6 (**permalink**) 10/10/2009, 08:07

Hola

En vez de Transitional prueba con Strict

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="http-equiv" content="Content-type: text/html; charset=UTF-8"/>

Algo de lectura

Suerte

wolfmoon · #7 (**permalink**) 10/10/2009, 08:09

el scrip es este:

Código:

<script type="text/javascript">

/*
Floating Menu script- Roy Whittle (http://www.javascript-fx.com/)
Script featured on/available at http://www.dynamicdrive.com/
This notice must stay intact for use
*/

var verticalpos="frombottom"

if (!document.layers)
document.write('</div>')

function JSFX_FloatTopDiv()
{
var startX = 25,
startY = 800;
var ns = (navigator.appName.indexOf("Netscape") != -1);
var d = document;
function ml(id)
{
var el=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.left=x;this.style.top=y;};
el.x = startX;
if (verticalpos=="fromtop")
el.y = startY;
else{
el.y = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight;
el.y -= startY;
}
return el;
}
window.stayTopLeft=function()
{
if (verticalpos=="fromtop"){
var pY = ns ? pageYOffset : document.body.scrollTop;
ftlObj.y += (pY + startY - ftlObj.y)/8;
}
else{
var pY = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight;
ftlObj.y += (pY - startY - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopLeft()", 10);
}
ftlObj = ml("divStayTopLeft");
stayTopLeft();
}
JSFX_FloatTopDiv();
</script>

Es un menu que se desplaza con el scroll con efecto de ascensor.

wolfmoon · #8 (**permalink**) 10/10/2009, 08:10

Cita:

Iniciado por Adler

Hola

En vez de Transitional prueba con Strict

Algo de lectura

Suerte

Si si, he probado con todos, y con el unico que me funciona es con el que digo...

zerokilled · #9 (**permalink**) 10/10/2009, 08:12

debe ser por el document.body en el script. intenta reemplazando todas las ocurrencias de body por documentElement de modo que te queda asi document.documentElement.

wolfmoon · #10 (**permalink**) 10/10/2009, 08:21

Nada, que no quiere, solo me funciona con esta declaracion

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Panino5001 · #11 (**permalink**) 10/10/2009, 08:28

Probá algo como esto:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>test</title>

<style>

#pp{ width:100px; height:200px; background-color:orange; position:absolute;}

</style>

<script>

function transicion3(curva,ms,callback){

    window.globalIntervaloN=1;

    this.ant=0.01;

    this.done_=false;

    var _this=this;

    this.start=new Date().getTime();

    this.init=function(){

        setTimeout(function(){

                if(!_this.next()){

                    callback(1);

                    _this.done_=true;

                    window.globalIntervaloN=0;

                    return;

                }

                callback(_this.next());

                _this.init();

            },13);

    }

    this.next=function(){

        var now=new Date().getTime();

        if((now-this.start)>ms)

            return false;

        return this.ant=curva((now-this.start+.001)/ms,this.ant);

    }

}

function desacelerado(p){

    var maxValue=1, minValue=.001, totalP=1, k=.25;

    var delta = maxValue - minValue; 

    var stepp = minValue+(Math.pow(((1 / totalP) * p), k) * delta); 

    return stepp; 

}

function ejecutar2(obj,efectos,ms,curva){

    var t=new transicion3(

    curva,ms,function(p){

        

        for (var i=0;efectos[i];i++){

            if(efectos[i].fin<efectos[i].inicio){

                var delta=efectos[i].inicio-efectos[i].fin;

                obj.style[efectos[i].propCSS]=(efectos[i].inicio-(p*delta))+efectos[i].u;

                if(efectos[i].propCSS=='opacity'){

                    obj.style.zoom=1;

                    obj.style.MozOpacity = (efectos[i].inicio-(p*delta));

                    obj.style.KhtmlOpacity = (efectos[i].inicio-(p*delta));

                    obj.style.filter='alpha(opacity='+100*(efectos[i].inicio-(p*delta))+')';

                }

            }

            else{

                var delta=efectos[i].fin-efectos[i].inicio;

                   obj.style[efectos[i].propCSS]=(efectos[i].inicio+(p*delta))+efectos[i].u;

                if(efectos[i].propCSS=='opacity'){

                    obj.style.zoom=1;

                    obj.style.MozOpacity = (efectos[i].inicio+(p*delta));

                    obj.style.KhtmlOpacity = (efectos[i].inicio+(p*delta));

                    obj.style.filter='alpha(opacity='+100*(efectos[i].inicio+(p*delta))+')';

                }

            }

        }

        

    });

    t.init();

    t=null;

}

var globalCola2=[];

var globalIntervaloId2=null;

function encolar2(f){

    globalCola2.push(f);

    if(!globalIntervaloId2){

        globalIntervaloId2=setInterval(function(){

            if(!globalCola2.length){

                clearInterval(globalIntervaloId2);

                globalIntervaloId2=null;

            }

            if(!window.globalIntervaloN){

                var ae=globalCola2.shift();

                if(typeof ae=='function')

                    ae();

            }

        },13);

    }

}

function fx2(obj,efectos,ms,cola,curva){

    if(!window.globalIntervaloN)

        ejecutar2(obj,efectos,ms,curva);

    else {

        if(cola)

            return encolar2(function(){ejecutar2(obj,efectos,ms,curva);});

        else

            return;

    }    

   

}

function acomodar(){

        var desp=(document.documentElement.scrollTop+document.body.scrollTop) || self.pageYOffset;

        if(desp>=50){

            fx2($('pp'),[

            {'inicio':parseInt(estilo('pp','top')) || 0,'fin':desp+50,'u':'px','propCSS':'top'}

            ],500,false,desacelerado);    

        }else{

            fx2($('pp'),[

            {'inicio':parseInt(estilo('pp','top')) || 0,'fin':50,'u':'px','propCSS':'top'}

            ],500,false,desacelerado);    

        }

}

function $(x){return document.getElementById(x);}

function estilo(id,prop){

    if(window.getComputedStyle){

        return document.defaultView.getComputedStyle(document.getElementById(id),null).getPropertyValue(prop);

    }else{

        var re = /(-([a-z]){1})/g;

        if (prop == 'float') prop = 'styleFloat';

        if (re.test(prop)) {

            prop = prop.replace(re, function () {

                return arguments[2].toUpperCase();

            });

        }

        return document.getElementById(id).currentStyle[prop] ? document.getElementById(id).currentStyle[prop] : null;

    }

} 

setInterval(acomodar,600);

</script>

</head>

 
<body>

<div id="pp"></div><br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

 
</body>

</html>

wolfmoon · #12 (**permalink**) 10/10/2009, 09:01

Graciaas, funciona perfectamente....