[英]Making axis guide lines over an image that follow the mouse pointer
我在HTML頁面上有一個圖形的PNG圖像。
我希望包括出現在鼠標上方的一組重疊的x和y指導線,其頂點跟隨鼠標指針,以幫助用戶讀取x和y軸上的值。
例如,他們對WolframAlpha使用這種效果(盡管在IE <8中不起作用): http ://www.wolframalpha.com/input/?i=graph+y%3D2x
有沒有人對如何做到這一點有任何想法,JavaScript或其他方式? 我相信WolframAlpha會以某種方式使用HTML5畫布(請參見下面的屏幕截圖)。
盡管如果有一種避免使用畫布來支持IE8的方法,那將是非常好的。 網格線當然也可以超出圖像邊界並延伸到整個頁面,如果這樣可以使它更容易。
這是一個簡單的實現
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的行
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.