Mouse Pointer Proximity Distance Testing
by skibulk
HTML
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>CSS
* {
box-sizing: border-box;
margin: 0;
border: 0;
padding: 0;
}
td {
width: 100px;
height: 100px;
text-align: center;
vertical-align: middle;
background: gray;
}JavaScript
var i, offset, centerX, centerY, dist;
var tile, tiles = $$('td');
$('html').mousemove(function(event) {
for (i=0; i<tiles.length; i++) {
tile = tiles[i];
offset = tile.offset();
centerX = offset.left + tile.width()/2;
centerY = offset.top + tile.height()/2;
dist = distance(centerX, centerY, event.pageX, event.pageY);
tile.html(Math.round(dist));
if(dist<100) {
tile.css('background','orange');
}
else
{
tile.css('background','gray');
}
}
});
function $$(selector) {
var out = $(selector);
for (i=0; i<out.length; i++) out[i] = $(out[i]);
return out;
}
function distance(x1, y1, x2, y2) {
return Math.sqrt( (x2-=x1)*x2 + (y2-=y1)*y2 );
}