2

HTMLページにグラフのPNG画像があります。

ユーザーがx軸とy軸の値を読み取れるように、マウスオーバーに表示されるxとyのガイドラインのセットを追加したいと考えています。その頂点はマウスポインターの後に続きます。

たとえば、WolframAlphaでこのような効果を使用します（ただし、IE <8では機能しません）： http ：//www.wolframalpha.com/input/？i =graph + y％3D2x

誰かがこれを達成する方法、javascriptまたは他の方法について何かアイデアがありますか？それが助けになるなら、WolframAlphaはどういうわけかHTML5キャンバスを使用していると思います（下のスクリーンショットを参照）。

スクリーンショット。

IE8をサポートするためにcanvasの使用を回避する方法があれば、それは素晴らしいことです。グリッド線は、画像の境界を越えてページ全体に広がる可能性もあります。

4

1 に答える 1

6

これが簡単な実装です

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>

デモ

また、ページを横切る線でデモ

于 2012-07-13T00:44:52.983 に答える