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 coord）来处理响应式布局？

Answer 1

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()更适合跨浏览器的问题。

Answer 2

使用：getCurrentPos.view.outerHeight＆amp; getCurrentPos.view.outerWidth获取高度和宽度的实际大小，然后根据您已经获得的百分比计算百分比。

Answer 3

您可以进行jquery .width()调用，例如：

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

（还要注意jQuery .height()电话）

Answer 4

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

我制作了此CodePen以便于参考： https://codepen.io/DouglasGlover/pen/eYNPjwg

HTML（用于显示数字）：

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

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

body {
  margin: 0;
  overflow: hidden;
  width: 100vw;
  height: 100vh;
  background: skyblue;
  font-weight: bold;
  font-family: arial;
}

Javascript（魔术）：

// Container and displays
const container = document.querySelector("body");
let posXDisplay = document.getElementById("posX");
let posYDisplay = document.getElementById("posY");

// On mousemove
container.addEventListener("mousemove", (e)=> {
  // Do math
  xPercent = parseInt(e.pageX / window.innerWidth * 100);
  yPercent = parseInt(e.pageY / window.innerHeight * 100);

  // Display numbers
  posXDisplay.innerText = xPercent;
  posYDisplay.innerText = yPercent;
});

当前光标位置百分比

4 个答案: