在图像上制作跟随鼠标指针的轴引导线

【问题标题】：Making axis guide lines over an image that follow the mouse pointer在图像上制作跟随鼠标指针的轴引导线
【发布时间】：2012-07-12 22:56:30
【问题描述】：

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

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

例如，他们在 WolframAlpha 上使用了这样的效果（但在 IEhttp://www.wolframalpha.com/input/?i=graph+y%3D2x

有没有人对如何完成这个有任何想法，javascript 或其他？如果有帮助的话，我相信 WolframAlpha 会以某种方式使用 HTML5 画布（参见下面的屏幕截图）。

虽然如果有办法避免使用画布来支持 IE8，那就太好了。网格线当然也可以从图像边界延伸到整个页面，如果这样会更容易的话。

【问题讨论】：

标签： javascript html canvas mouseover

【解决方案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

【讨论】：