Текущее положение курсора в процентах

Question

Как получить текущую позицию курсора (координаты xy) в процентах?

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $(document).mousemove(function(getCurrentPos){ 
      var xCord = getCurrentPos.pageX; 
      var yCord = getCurrentPos.pageY; 
      console.log(xCord+" "+yCord); 
     }); 
    }); 
</script> 

Я хочу, чтобы общая ширина страницы (x координата) в процентах имела дело с отзывчивой компоновкой?

Answer 1

Вы можете поместить в вызове JQuery .width(), что-то вроде:

xPercent = xCord/$(document).width() * 100; 
console.log(xPercent + "%"); 

(также отметить JQuery .height() вызова)

Answer 2

использование: getCurrentPos.view.outerHeight & getCurrentPos.view.outerWidth, чтобы получить фактический размер высота & ширины, а затем известково процент с тем, что у вас уже есть.

Answer 3

pageY будет принимать во внимание смещения строки заголовка браузера, вы хотите вместо этого используйте clientY. В следующем коде у вас будут xPercent и yPercent, которые идут от 0 до 1 (умножьте на 100, если вы хотите фактический процент).

$(document).mousemove(function(getCurrentPos){ 
    var xCord = getCurrentPos.clientX; 
    var yCord = getCurrentPos.clientY; 

    var xPercent = xCord/window.innerWidth; 
    var yPercent = yCord/window.innerHeight; 
}); 

Или так как вы используете JQuery, $(window).width() и $(window).height() лучше для проблем кросс-браузера.