在与鼠标指针相关的图像上创建轴引导线

Question

我在HTML页面上有一个图形的PNG图像.

我希望包含一组叠加的x和y引导线,这些引导线出现在鼠标上方,其顶点跟随鼠标指针,以帮助用户读取x和y轴上的值.

例如,他们对WolframAlpha使用了这样的效果(虽然在IE <8中不起作用):http://www.wolframalpha.com/input/？i = graph + y%3D2x

有没有人有任何想法如何实现这个,JavaScript或其他？我相信WolframAlpha在某种程度上使用HTML5画布,如果这有帮助(见下面的截图).

虽然如果有一种方法可以避免使用canvas来支持IE8,那就太棒了.网格线当然也可以从图像边界延伸到整个页面,如果这样可以更容易.

Answer 1

这是一个简单的实现

CSS

#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%;}

JS(使用jquery)

$('#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();
});

HTML

<div id="imageholder">
    <div id="horizontal"></div>
    <div id="vertical"></div>
    <img src="http://placehold.it/320x280">
</div>

DEMO

还有穿过页面DEMO的线条