SOURCE

var hair_up = document.getElementById('cross-up'),hair_down = document.getElementById('cross-down');
document.addEventListener('mousemove', function(event) {
  hair_up.style.left = (event.clientX-hair_up.clientWidth) + 'px'; // 设置十字线的X坐标位置
  hair_up.style.top = (event.clientY-hair_up.clientHeight) + 'px'; // 设置十字线的Y坐标位置
  hair_down.style.left = event.clientX + 'px'; // 设置十字线的X坐标位置
  hair_down.style.top = event.clientY + 'px'; // 设置十字线的Y坐标位置
  hair_down.innerHTML='x:'+event.clientX+'<br>y:'+event.clientY;
});

<div id="cross-up" class="crosshair hair-up"></div>
<div id="cross-down" class="crosshair hair-down"></div>

body, html { height: 100%; margin: 0; overflow: hidden; }
.crosshair {
  position: absolute;
  width: 55px; /* 更宽一些以便看到十字线效果 */
  height: 55px; /* 更宽一些以便看到十字线效果 */
  background-color: transparent; /* 背景透明 */
  pointer-events: none; /* 防止十字线挡住鼠标事件 */
  z-index: 1000; /* 确保十字线在最上层 */
}
.hair-up{
  left: -55px;
  top: -55px;
  border-right: 1px dashed red; /* 左边的虚线 */
  border-bottom: 1px dashed red; /* 上边的虚线 */
}
.hair-down{
  border-left: 1px dashed red; /* 左边的虚线 */
  border-top: 1px dashed red; /* 上边的虚线 */
}