Untitled

<html>

<h2>Choose step size:</h2>
1 px <input type="radio" id="small" name="move" value="1" checked="checked"><br>
10 px <input type="radio" id="medium" name="move" value="10"><br>
100 px <input type="radio" id="large" name="move" value="100"><br>

<div class='a' id="mainDiv" onmouseover=" move();"></div>

<script type="text/javascript">
$( document ).ready( function(){
  $('#mainDiv').mouseover(function(){
      var stepSize = parseInt( $('input[type=radio][name=move]:checked').val() );

      var pos = $( this ).position();
      var left = parseInt( pos.left );
      var top = parseInt( pos.top );

      var new_left = left + stepSize;
      var new_top = top + stepSize;

      $( this ).css('left', new_left + 'px' );
      $( this ).css('top', new_top + 'px' );
  });});
</script>
<style>
div.a {
  width: 80px;
  height:80px;
  background-color:blue;
  position:absolute;

}
</style>