当前光标位置的百分比

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()调用，例如：

.width()

（也请注意jQuery

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

调用]

Answer 2

.height()将考虑浏览器标题栏的偏移量，而您想使用.height()。在下面的代码中，您将获得pageY和clientY，它们从0变为1（如果需要实际百分比，请乘以100）。

xPercent

或者因为您使用的是jQuery，所以yPercent和

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

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

更适合跨浏览器。

Answer 3

使用：$(window).width()＆$(window).height()来获取高度和宽度的实际大小，然后使用已经得到的百分比计算百分比。

Answer 4

[我知道这太老了，并且有一个可接受的答案，但是我认为，由于它会在Google上弹出，因此我会提供一种非Jquery的方式，虽然可能很简单。

我制作了此CodePen以便于参考： getCurrentPos.view.outerHeight

HTML（用于显示数字）：

getCurrentPos.view.outerWidth

CSS（使主体在演示中为100％的高度和宽度）：

https://codepen.io/DouglasGlover/pen/eYNPjwg

Javascript（魔术）：

Position X: <span id="posX">NaN</span>%<br/>
Position Y: <span id="posY">NaN</span>%