3

Gostaria de criar um cursor tipo para gráfico em JavaScript, sem ser por imagem a partir do css. Por exemplo como esta neste grafico http://bl.ocks.org/benjchristensen/2657838 mas com duas linhas para x e y. (crossover) Sei que existel bibliotecas para isso.

2
  • Pode explicar melhor o que pretende? Há gráficos que têm isso já feito... ou que usar imagens estáticas como gráficos e ter essas linhas em cima da imagem?
    – Sergio
    9/12/2014 às 23:02
  • Pretendo so mesmo o cursor. Para ser uma imagem tinha de ser grande, e com isso nao conseguia mover os objetos com o cursor.
    – akm
    9/12/2014 às 23:06

1 Resposta 1

4

Talvez seja isto que você busca: duas linhas formando uma cruz, acompanhando a posição do mouse:

var v = document.querySelector('.cursor-v');
var h = document.querySelector('.cursor-h');
var elBox = document.querySelector('.cursor').getBoundingClientRect();

window.onmousemove = function(e) {
    var mouseX = e.clientX - elBox.left;
    var mouseY = e.clientY - elBox.top;
    
    h.style.top = mouseY + 'px';
    v.style.left = mouseX + 'px';
};
html, body {
    height: 100%;
}

.cursor {
    position: relative;
    width: 100%;
    height: 100%;
}

.cursor-h {
    position: absolute;
    width: 100%;
    height: 0;
    border-top: 1px solid red;
}

.cursor-v {
    position: absolute;
    width: 0;
    height: 100%;
    border-left: 1px solid red;
}
<div class="cursor"><div class="cursor-h"></div><div class="cursor-v"></div></div>

5
  • Isso, obrigado. E como posso limitar para so aparecer dentro de por exemplo uma div?
    – akm
    10/12/2014 às 0:54
  • Coloque a div .cursor dentro da div que você quer, acho que seria suficiente.
    – bfavaretto
    10/12/2014 às 0:55
  • Aliás, só isso não basta. Aguarde que vou editar, @akm.
    – bfavaretto
    10/12/2014 às 1:12
  • Pronto @akm, agora sim funciona em qualquer posição da página.
    – bfavaretto
    10/12/2014 às 1:19
  • Queria mesmo so a funcionar numa determinada zona da pagina. E quando saisse dessa zona voltar ao cursor normal.
    – akm
    10/12/2014 às 10:44

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .