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.
-
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?– Sergio9/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.– akm9/12/2014 às 23:06
Adicione um comentário
|
1 Resposta
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>
-
Isso, obrigado. E como posso limitar para so aparecer dentro de por exemplo uma div?– akm10/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 -
-
-
Queria mesmo so a funcionar numa determinada zona da pagina. E quando saisse dessa zona voltar ao cursor normal.– akm10/12/2014 às 10:44