• 0
Sign in to follow this  
Senshi

Movimentar Uma Div

Question

Postei uma coisa dessas aki a algum tempo.. mas acho q ninguém respondeu!

não tenho ideia de como faz.. por isso ficar dificil procurar no forum algo q você nem sabe o que é! tongue.gif

e o seguinte, olhem esse site: http://www.mapleglobal.com/

observe a lateral direta, ela c mexe conforme você vai interagindo com o scroll da pagina! ^^

eu queria fazer um esquema desse pru menu do meu site...

creio q deve estar dentro de uma DIV, porem não sei como faz para movimentar.

alguém ae poderia me ajudar?

valeu!

Share this post


Link to post
Share on other sites

5 answers to this question

Recommended Posts

  • 0

....se não, isso com certeza isso vai ajudar :-D:

<html>
<body>


<head>
<style TYPE="text/css">
#floater {
        position: absolute;
        right: 0;
        visibility: visible;
        z-index: 0;
}
</style>
</head>
<script LANGUAGE="JavaScript">

        self.onError=null;
        currentX = currentY = 0;  
        whichIt = null;           
        lastScrollX = 0; lastScrollY = 0;
        NS = (document.layers) ? 1 : 0;
        IE = (document.all) ? 1: 0;



        function heartBeat() {

            if(IE) { diffY = document.body.scrollTop; diffX = document.body.scrollLeft; }
            if(NS) { diffY = self.pageYOffset; diffX = self.pageXOffset; }
            if(diffY != lastScrollY) {
                        percent = .1 * (diffY - lastScrollY);
                        if(percent > 0) percent = Math.ceil(percent);
                        else percent = Math.floor(percent);
                                       if(IE) document.all.floater.style.pixelTop += percent;
                                       if(NS) document.floater.top += percent; 
                        lastScrollY = lastScrollY + percent;
            }
               if(diffX != lastScrollX) {
                        percent = .1 * (diffX - lastScrollX);
                        if(percent > 0) percent = Math.ceil(percent);
                        else percent = Math.floor(percent);
                        if(IE) document.all.floater.style.pixelLeft += percent;
                        if(NS) document.floater.left += percent;
                        lastScrollX = lastScrollX + percent;
                }       
        }



        function checkFocus(x,y) { 

                stalkerx = document.floater.pageX;
                stalkery = document.floater.pageY;
                stalkerwidth = document.floater.clip.width;
                stalkerheight = document.floater.clip.height;
                if( (x > stalkerx && x < (stalkerx+stalkerwidth)) && (y > stalkery && y < (stalkery+stalkerheight))) return true;
                else return false;
        }
   
        function grabIt(e) {

                if(IE) {
                        whichIt = event.srcElement;
                        while (whichIt.id.indexOf("floater") == -1) {
                                whichIt = whichIt.parentElement;
                                if (whichIt == null) { return true; }
                    }
                        whichIt.style.pixelLeft = whichIt.offsetLeft;
                    whichIt.style.pixelTop = whichIt.offsetTop;
                        currentX = (event.clientX + document.body.scrollLeft);
                        currentY = (event.clientY + document.body.scrollTop);   
                } else { 
                window.captureEvents(Event.MOUSEMOVE);
                if(checkFocus (e.pageX,e.pageY)) { 
                        whichIt = document.floater;
                        StalkerTouchedX = e.pageX-document.floater.pageX;
                        StalkerTouchedY = e.pageY-document.floater.pageY;
                } 
                }
            return true;
        }
        
        function moveIt(e) {
                if (whichIt == null) { return false; }
                if(IE) {
                    newX = (event.clientX + document.body.scrollLeft);
                    newY = (event.clientY + document.body.scrollTop);
                    distanceX = (newX - currentX);    distanceY = (newY - currentY);
                    currentX = newX;    currentY = newY;
                    whichIt.style.pixelLeft += distanceX;
                    whichIt.style.pixelTop += distanceY;
                        if(whichIt.style.pixelTop < document.body.scrollTop) whichIt.style.pixelTop = document.body.scrollTop;
                        if(whichIt.style.pixelLeft < document.body.scrollLeft) whichIt.style.pixelLeft = document.body.scrollLeft;
                        if(whichIt.style.pixelLeft > document.body.offsetWidth - document.body.scrollLeft - whichIt.style.pixelWidth - 20) whichIt.style.pixelLeft = document.body.offsetWidth - whichIt.style.pixelWidth - 20;
                        if(whichIt.style.pixelTop > document.body.offsetHeight + document.body.scrollTop - whichIt.style.pixelHeight - 5) whichIt.style.pixelTop = document.body.offsetHeight + document.body.scrollTop - whichIt.style.pixelHeight - 5;
                        event.returnValue = false;
                } else { 
                        whichIt.moveTo(e.pageX-StalkerTouchedX,e.pageY-StalkerTouchedY);
                if(whichIt.left < 0+self.pageXOffset) whichIt.left = 0+self.pageXOffset;
                if(whichIt.top < 0+self.pageYOffset) whichIt.top = 0+self.pageYOffset;
                if( (whichIt.left + whichIt.clip.width) >= (window.innerWidth+self.pageXOffset-17)) whichIt.left = ((window.innerWidth+self.pageXOffset)-whichIt.clip.width)-17;
                if( (whichIt.top + whichIt.clip.height) >= (window.innerHeight+self.pageYOffset-17)) whichIt.top = ((window.innerHeight+self.pageYOffset)-whichIt.clip.height)-17;
                return false;
                }
            return false;
        }
        
        function dropIt() {
                whichIt = null;
            if(NS) window.releaseEvents (Event.MOUSEMOVE);
            return true;
        }

        
        if(NS) {
                window.captureEvents(Event.MOUSEUP|Event.MOUSEDOWN);
                window.onmousedown = grabIt;
                window.onmousemove = moveIt;
                window.onmouseup = dropIt;
        }
        if(IE) {
                document.onmousedown = grabIt;
                document.onmousemove = moveIt;
                document.onmouseup = dropIt;
        }
        
        if(NS || IE) action = window.setInterval("heartBeat()",1);

</script>

<div id="floater" style="position:absolute; left:400px; top:10px">
<a href="https://www.scriptbrasil.com.br/">
<img src="suaimagem.gif" border="0"></a>
</div>
<p><a name="topo"></a></p>
<div align="center"><center>

<!------------------------------------------------------->
<font size=5 color=white>PARA TESTAR O EFEITO </FONT>
<font size=5 color=white>PARA TESTAR O EFEITO </FONT>
<font size=5 color=white>PARA TESTAR O EFEITO </FONT>
<font size=5 color=white>PARA TESTAR O EFEITO </FONT>
<font size=5 color=white>PARA TESTAR O EFEITO </FONT>
<font size=5 color=white>PARA TESTAR O EFEITO </FONT>
<font size=5 color=white>PARA TESTAR O EFEITO </FONT>
<font size=5 color=white>PARA TESTAR O EFEITO </FONT>
<font size=5 color=white>PARA TESTAR O EFEITO </FONT>
<font size=5 color=white>PARA TESTAR O EFEITO </FONT>
<font size=5 color=white>PARA TESTAR O EFEITO </FONT>
<font size=5 color=white>PARA TESTAR O EFEITO </FONT>
<font size=5 color=white>PARA TESTAR O EFEITO </FONT>
<font size=5 color=white>PARA TESTAR O EFEITO </FONT>
<font size=5 color=white>PARA TESTAR O EFEITO </FONT>
<font size=5 color=white>PARA TESTAR O EFEITO </FONT>
<font size=5 color=white>PARA TESTAR O EFEITO </FONT>
<font size=5 color=white>PARA TESTAR O EFEITO </FONT>
<font size=5 color=white>PARA TESTAR O EFEITO </FONT>
<font size=5 color=white>PARA TESTAR O EFEITO </FONT>
<font size=5 color=white>PARA TESTAR O EFEITO </FONT>
<font size=5 color=white>PARA TESTAR O EFEITO </FONT>
<font size=5 color=white>PARA TESTAR O EFEITO </FONT>
<font size=5 color=white>PARA TESTAR O EFEITO </FONT>
<font size=5 color=white>PARA TESTAR O EFEITO </FONT>
<font size=5 color=white>PARA TESTAR O EFEITO </FONT>
<font size=5 color=white>PARA TESTAR O EFEITO </FONT>
<font size=5 color=white>PARA TESTAR O EFEITO </FONT>
<font size=5 color=white>PARA TESTAR O EFEITO </FONT>
<font size=5 color=white>PARA TESTAR O EFEITO </FONT>
<font size=5 color=white>PARA TESTAR O EFEITO </FONT>
<font size=5 color=white>PARA TESTAR O EFEITO </FONT>
<font size=5 color=white>PARA TESTAR O EFEITO </FONT>
<font size=5 color=white>PARA TESTAR O EFEITO </FONT>
<font size=5 color=white>PARA TESTAR O EFEITO </FONT>
<font size=5 color=white>PARA TESTAR O EFEITO </FONT>
<font size=5 color=white>PARA TESTAR O EFEITO </FONT>
<font size=5 color=white>PARA TESTAR O EFEITO </FONT>
<font size=5 color=white>PARA TESTAR O EFEITO </FONT>
<font size=5 color=white>PARA TESTAR O EFEITO </FONT>
<font size=5 color=white>PARA TESTAR O EFEITO </FONT>
<font size=5 color=white>PARA TESTAR O EFEITO </FONT>
<font size=5 color=white>PARA TESTAR O EFEITO </FONT>
<font size=5 color=white>PARA TESTAR O EFEITO </FONT>
<font size=5 color=white>PARA TESTAR O EFEITO </FONT>
<font size=5 color=white>PARA TESTAR O EFEITO </FONT>
<font size=5 color=white>PARA TESTAR O EFEITO </FONT>
<font size=5 color=white>PARA TESTAR O EFEITO </FONT>
<font size=5 color=white>PARA TESTAR O EFEITO </FONT>
<font size=5 color=white>PARA TESTAR O EFEITO </FONT>
<font size=5 color=white>PARA TESTAR O EFEITO </FONT>
<font size=5 color=white>PARA TESTAR O EFEITO </FONT>
<font size=5 color=white>PARA TESTAR O EFEITO </FONT>
<font size=5 color=white>PARA TESTAR O EFEITO </FONT>
<font size=5 color=white>PARA TESTAR O EFEITO </FONT>
<font size=5 color=white>PARA TESTAR O EFEITO </FONT>
<font size=5 color=white>PARA TESTAR O EFEITO </FONT>
<font size=5 color=white>PARA TESTAR O EFEITO </FONT>
<font size=5 color=white>PARA TESTAR O EFEITO </FONT>
<font size=5 color=white>PARA TESTAR O EFEITO </FONT>
<font size=5 color=white>PARA TESTAR O EFEITO </FONT>
<font size=5 color=white>PARA TESTAR O EFEITO </FONT>
<font size=5 color=white>PARA TESTAR O EFEITO </FONT>
<font size=5 color=white>PARA TESTAR O EFEITO </FONT>
<font size=5 color=white>PARA TESTAR O EFEITO </FONT>
<font size=5 color=white>PARA TESTAR O EFEITO </FONT>
<font size=5 color=white>PARA TESTAR O EFEITO </FONT>
<font size=5 color=white>PARA TESTAR O EFEITO </FONT>
<font size=5 color=white>PARA TESTAR O EFEITO </FONT>
<font size=5 color=white>PARA TESTAR O EFEITO </FONT>
<font size=5 color=white>PARA TESTAR O EFEITO </FONT>
<font size=5 color=white>PARA TESTAR O EFEITO </FONT>
<font size=5 color=white>PARA TESTAR O EFEITO </FONT>
<font size=5 color=white>PARA TESTAR O EFEITO </FONT>
<font size=5 color=white>PARA TESTAR O EFEITO </FONT>
<font size=5 color=white>PARA TESTAR O EFEITO </FONT>
<font size=5 color=white>PARA TESTAR O EFEITO </FONT>
<font size=5 color=white>PARA TESTAR O EFEITO </FONT>

</body>
</html>

abraço

Share this post


Link to post
Share on other sites
  • 0

aeeeeeeeeeeeeeeeeeeeeeeeee

era isso mermo! ^^

valeu os dois! ^^

AVISO

fercosmig, já q você e moderador, bem q você poderia editar o post q você me passo ne? tem uns emotions no meio do codigo >.<

acho q c você trocar o QUOTE por CODE ou HTML vai ficar melhor! ^^

valeu!

Share this post


Link to post
Share on other sites
  • 0

Voltei! (valeu por abrir novamente meu tópico modera!) laugh.gif

1 - O codigo funciona perfeitamente como postei antes, porem, preciso aprender como fucniona para poder editar o que preciso!

Infelizmente não entendi NADA do codigo.

Se alguém tiver um tuto com conceitos basicos desse script posta ae! ^^

2 - vou tentar explicar o que preciso, caso alguém saiba onde modificar:

Esse codigo deixa o elemento fixo em um lugar independente de onde você estiver na pagina!

Mas o que preciso e q o elemento c mova somente c for sumir da pagina!!

por exemplo:

Meu MENU esta no eixo Y = 200 de distancia...

Se movimentar o scroll ele não pode se mexer...

caso movimente o scroll muitu para baixo e faça o menu "SUMIR DA TELA" (subir muito), ae SIM ele começa a se mexer!

Se alguém souber como resolver isso poste ae porfavor! ^^

Share this post


Link to post
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.

Sign in to follow this