Javascript 在跟随鼠标指针的图像上制作轴引导线
我在HTML页面上有一个图形的PNG图像 我希望包括一组出现在鼠标上方的叠加x和y引导线,其顶点跟随鼠标指针,以帮助用户读取x和y轴上的值Javascript 在跟随鼠标指针的图像上制作轴引导线,javascript,html,canvas,mouseover,Javascript,Html,Canvas,Mouseover,我在HTML页面上有一个图形的PNG图像 我希望包括一组出现在鼠标上方的叠加x和y引导线,其顶点跟随鼠标指针,以帮助用户读取x和y轴上的值 例如,他们在WolframAlpha上使用这种效果(在IE中不起作用 CSS JS(jquery的使用) HTML 还有横穿页面的线条 #imageholder div{ background-color:black;position:absolute; } #imageholder{;position:relative;display:inline-
例如,他们在WolframAlpha上使用这种效果(在IE中不起作用 CSS JS(jquery的使用) HTML
还有横穿页面的线条
#imageholder div{ background-color:black;position:absolute; }
#imageholder{;position:relative;display:inline-block;overflow:hidden; }
#horizontal{width:100%;height:1px;}
#vertical{width:1px;height:100%;}
$('#imageholder img').on('mousemove', null, [$('#horizontal'), $('#vertical')],function(e){
e.data[1].css('left', e.offsetX==undefined?e.originalEvent.layerX:e.offsetX);
e.data[0].css('top', e.offsetY==undefined?e.originalEvent.layerY:e.offsetY);
});
$('#imageholder').on('mouseenter', null, [$('#horizontal'), $('#vertical')], function(e){
e.data[0].show();
e.data[1].show();
}).on('mouseleave', null, [$('#horizontal'), $('#vertical')], function(e){
e.data[0].hide();
e.data[1].hide();
});
<div id="imageholder">
<div id="horizontal"></div>
<div id="vertical"></div>
<img src="http://placehold.it/320x280">
</div>