Concept

In this demo the ball follows the mouse movement.

Using mouse position, we calculate the ball position relative to its parent (the ball has absolute position inside its parent demo-blok). Then we change the ball position to the calculated value.

We use transition for the ball movement. Without transition, the ball will be sticked to the mouse location.

Note: since the ball is moving outside its parent container, we set the container 'overflow' property to 'visible' value.

To Do

Move the mouse, see how the ball moves.

Check 'Remove Transition' checkbox and see how the ball moves now without transition.

Check 'Change Overflow' checkbox and see how it moves now. When this checkbox is checked, the ball's parent demo-block 'overflow' property is set to 'hidden'. Thus, the ball will be seen only in the demo-block area.

Mouse Event Location in JavaScript

MouseEvent.pageX, MouseEvent.pageY, MouseEvent.screenX, MouseEvent.screenY, MouseEvent.clientX and MouseEvent.clientY return a number which indicates the number of "pixels" of the event point from the reference point. The event point is where the user clicked, the reference point is a point in the upper left. These properties return the horizontal and vertical distance from that reference point.

• The events pageX and pageY - Values (in CSS px) of the mouse position relative to the Document most-top/left "sides".
• The events clientX and clientY - Values (in CSS px) of the mouse position relative to the Browser's viewport boundaries. Even if you scroll the Document, the values are always the same.
• The events screenX and screenY are the values (in device px) of the current mouse position relative to the physical screen.

Location Properties in jQuery

offset() - Get the current coordinates of the first element, or set the coordinates of every element, in the set of matched elements, relative to the document. offset() returns an object containing the properties top and left (vertical and horizontal locations).

To get the element location relative to the browser viewport use the folowing:

el = $('#my-element');
offset = el.offset()
elViewportOffsetTop = offset.top - $(document).scrollTop()
elViewportOffsetLeft = offset.left - $(document).scrollLeft()