<div id="showCood">
  <div id="posX"></div>
  <div id="posY"></div>
</div>
<div id="jQueryPos"></div>
body {
  width: 2000px;
  height: 2000px;
  background: red;
}
#showCood {
  display: none;
  width: 100px;
  height: 100px;
  position: absolute;
  border: 1px solid #ccc;
}
#jQueryPos {
  display: none;
  width: 100px;
  height: 100px;
  position: absolute;
  border: 1px solid red;
}
function getMousePos(evt) {
  var doc = document.documentElement || document.body;
  var pos = {
    x: evt ? evt.pageX : window.event.clientX + doc.scrollLeft - doc.clientLeft,
    y: evt ? evt.pageY : window.event.clientY + doc.scrollTop - doc.clientTop
  };
  return pos;
}
document.onmousemove = moveMouse;

function moveMouse(evt) {
  var pos = getMousePos(evt),
    cood = document.getElementById("showCood");
  cood.style.display = "block";
  cood.style.left = pos.x + 50 + "px";
  cood.style.top = pos.y + 50 + "px";
  document.getElementById("posX").innerHTML = "X: " + pos.x;
  document.getElementById("posY").innerHTML = "Y: " + pos.y;
}

$(document).mousemove(function(e) {
  $("#jQueryPos").text(e.pageX + "," + e.pageY).show().css({
    left: e.pageX - 50,
    top: e.pageY - 50
  });
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js