Silici0 :: Blog

Div Seguindo o Mouse

Muita gente me perguntou como fazer isso, então vou escrever esse tutorial de como fazer isso... na verdade vou traduzir um tutorial, pelo menos parte dele... pois na verdade eu procurei como desenvolver um e foi dificil roda-lo em varios navegadores ai então achei esse tutorial no site do About.com ...

Na verdade é uma div que esta sempre ao lado do mouse... ele automaticamente calcula a posição da div sempre que você mecher o mouse. Então a impressão que temos é a de que a div esta grudada ao mouse, um efeito super legal e interessante, com algumas idéias podemos desenvolver bastante coisas legais com isso...

Mas vamos ao pratico, primeiro temos o script JavaScript que calcula a posição do mouse sempre o mouse se mover:

Existem 3 variaveis que você pode mecher afim de alterar algo no tutorial abaixo:
- divName : É o nome da div que ficara 'grudada' ou melhor seguira o mouse.
- offX e offY : São as variaveis que determinam a que distancia que o 'Objeto' (a nossa div) se distanciará do mouse.

JAVASCRIPT:

var divName = 'MinhaDiv'; // div that is to follow the mouse
// (must be position:absolute)
var offX = 5; // X offset from mouse position
var offY = 5; // Y offset from mouse position
function mouseX(evt) {if (!evt) evt = window.event; if (evt.pageX) return evt.pageX; else if (evt.clientX)return evt.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft); else return 0;}
function mouseY(evt) {if (!evt) evt = window.event; if (evt.pageY) return evt.pageY; else if (evt.clientY)return evt.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop); else return 0;}
function follow(evt) {if (document.getElementById) {var obj = document.getElementById(divName).style; obj.visibility = 'visible';
obj.left = (parseInt(mouseX(evt))+offX) + 'px';
obj.top = (parseInt(mouseY(evt))+offY) + 'px';}}
document.onmousemove = follow;

Então para adicionarmos o Objeto ou DIV que irá seguir o mouse utilizaremos a seguinte linha de código:

HTML:

<div id="MinhaDiv">Testando 1 2 3 ...</div>

E então finalmente o estilo:

CSS:

#MinhaDiv {
position:absolute;
overflow:hidden;
visibility: hidden;
z-index:999;
width:20px;
height:15px;
background-color:#ffffcc;
}

Meus dois exemplos estão aqui : exemplo 0 e exemplo 1. Dúvidas? É so comentar. Abraços

4 Comments »

Cara que legal... devo estar meio alienado hoje, pois não achei utilidade pra isso, mas que é legal é.... um dia ainda acho.... hehehehe

Abraço

Comment by Aguinelo Pedroso — Julho 10, 2007 #

Bota alienado nisso... vou escrever outros tutoriais com mais funções que integram com ele idéias diria que geniais.
Espere e verás.

Abraços

Comment by silici0 — Julho 10, 2007 #

Muito bom, poderia fazer um sobre aqueles "banners" flutuantes de anuncios que tem nos portais... ibest... terra ... esses assim ... =P

Abraços

Comment by Roberto — Julho 11, 2007 #

[...] Resolvi escrever sobre uma idéia que rola bastante por ae, de um div seguir o mouse, porém somente apareçer (mostrar a div) quando o mouse esta por cima de um link, como comentado no topico Div Seguindo o Mouse, somente irei agora adicionar algumas poucas linhas de códigos, recomendo que antes leia o outro topico para não ficar perdido. [...]

Pingback by Silici0 :: Blog » Show e Hide (Idéia para Div Seguindo o mouse) — Julho 19, 2007 #