Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Dieguinhu Web

Verificar posição do mouse a partir de um eixo

Por , em Javascript

Recommended Posts

Dieguinhu Web    0

Dieguinhu Web
Postado

Galera to com um problema

 

 

 

tenho um botao

 

X

 

 

quando coloco o mouse nele ele me abre uma div do lado

 

DIV X

 

 

queria que enquanto o mouse estiver pela direita >>>> execute uma função que feche a div mas se ele estiver pela esquerda a div fique aberta... como faço pra pegar a orientação do mouse para fazer isso?

 

 

 

obrigado pela ajuda

Compartilhar este post

Link para o post
Compartilhar em outros sites

51L3N7    1

51L3N7
Postado

Você pode pegar a posição do mouse com as propriedades pageX ou pageY e clientX ou clientY.

Exemplo:

onmousemove = function( e ) {
alert( 'pageX = ' + e.pageX + '\npageY = ' + e.pageY ); 
}

 

Onde X é igual a posição horizontal do mouse e Y a vertical.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Logan Martinelli    0

Logan Martinelli
Postado

Para você fazer isso é assim:

 

Você pode testar aqui fora do seu script e depois você junta tudo com sua div.

 

Assim que o mouse ir para direita e passar do início dela ela será fechada e vice versa

 

Cria uma página ai:

 

 

div.html

 

Aqui a div está com position absolute; mais pode está com position relative também, ou sem position definido.

 

<html>
<head>
<script>

function p(elemID){var offsetTrail = document.getElementById(elemID);
var offsetLeft = 0; var offsetTop = 0;
while (offsetTrail) {
offsetLeft += offsetTrail.offsetLeft;
offsetTop += offsetTrail.offsetTop;
offsetTrail = offsetTrail.offsetParent;
}
if (navigator.userAgent.indexOf("Mac") != -1 && typeof document.body.leftMargin != "undefined") {
offsetLeft += document.body.leftMargin; 
offsetTop += document.body.topMargin;}
return {left:offsetLeft, top:offsetTop};
}

var Left; 

document.onmousemove=function(e){
Left=p("divQueAbre").left;  

var wleft = e.pageX; 

var myDiv=document.getElementById("divQueAbre");

if(wleft > Left){
/* Fechando... infelismente vamos apenas torná-la invisível se não, 
não poderemos pegar sua posição depois de fechada */

myDiv.style.opacity='0';
myDiv.style.filter='alpha(Opacity=0)';
}
else if(wleft < Left){
//Abrindo
myDiv.style.opacity='1';
myDiv.style.filter='alpha(Opacity=100)';
}


}

</script>
</head>

<body> 
<div id="divQueAbre" style="position:absolute; top:150px; left:350px;">
O conteudo aqui da div etc....
</div>


</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito