个人中心
gpt4 book ai didi

JavaScript:鼠标坐标不正确(全屏模式下的 pageX 和 pageY)

转载 作者：太空宇宙 更新时间：2023-11-04 16:02:53 25 4
gpt4 key购买 nike

我创建 JavaScript 来获取鼠标坐标。

通过鼠标坐标显示图像的脚本(动画光标脚本 (с) Zac Ang Eng Keat):

<html>
<head>
<title>Cursor</title>
<script type="text/javascript">
document.body.style.cursor = 'none';
var trailimage=["http://2aek.com/images/cursors/cur1.gif", 32, 32] //image path, plus width and height
var offsetfrommouse=[0,0] //image x,y offsets from cursor position in pixels. Enter 0,0 for no offset
var displayduration=0 //duration in seconds image should remain visible. 0 for always.

if (document.getElementById || document.all)
document.write('<div id="trailimageid" style="position:absolute;visibility:visible;left:0px;top:0px;width:1px;height:1px"><img src="'+trailimage[0]+'" border="0" width="'+trailimage[1]+'px" height="'+trailimage[2]+'px"></div>')

function gettrailobj(){
if (document.getElementById)
return document.getElementById("trailimageid").style
else if (document.all)
return document.all.trailimagid.style
}

function truebody(){
return (!window.opera && document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function hidetrail(){
gettrailobj().visibility="hidden"
document.onmousemove=""
}

function followmouse(e){
var xcoord=offsetfrommouse[0]
var ycoord=offsetfrommouse[1]

xcoord+=e.pageX
ycoord+=e.pageY

var docwidth=document.all? truebody().scrollLeft+truebody().clientWidth : pageXOffset+window.innerWidth-15
var docheight=document.all? Math.max(truebody().scrollHeight, truebody().clientHeight) : Math.max(document.body.offsetHeight, window.innerHeight)
if (xcoord+trailimage[1]+3>docwidth || ycoord+trailimage[2]> docheight)
gettrailobj().display="none"
else
gettrailobj().display=""
gettrailobj().left=xcoord+"px"
gettrailobj().top=ycoord+"px"
}

document.onmousemove=followmouse
if (displayduration>0)
setTimeout("hidetrail()", displayduration*1000)
</script>
</head>
<body>
Press F11 (make the browser window full screen) in Firefox
</body>
</html>

但是，它有一些问题:如果在 Firefox 中我更改了全屏模式，图像会得到不正确的坐标。

我尝试使用 screenX 和 screenY 代替 pageX 和 pageY，但它需要以某种方式获得更改全屏模式的时刻。

更新:

<html>
<head>
<title>Cursor</title>
<script type="text/javascript">
var isFirefox = (navigator.userAgent.toLowerCase().indexOf('firefox') > -1) || (typeof InstallTrigger !== 'undefined');

function isFullScreen() { //helper func to detect if Firefox is in fullscreen
  if (window['fullScreen'] !== undefined) return window.fullScreen; //Firefox support this property
  return (screen.width == window.innerWidth) && (window.screenY == 0 || window.screenTop == 0) && Math.abs(screen.height - window.innerHeight) < 45;
}

document.body.style.cursor = 'none';
var trailimage = ["http://2aek.com/images/cursors/cur1.gif", 32, 32] //image path, plus width and height 
var offsetfrommouse = [0, 0] //image x,y offsets from cursor position in pixels. Enter 0,0 for no offset
var displayduration = 0 //duration in seconds image should remain visible. 0 for always.

if (document.getElementById || document.all)
  document.write('<div id="trailimageid" style="position:absolute; visibility:visible; left:0px; top:0px; width:1px; height:1px"><img src="' + trailimage[0] + '" border="0" width="' + trailimage[1] + 'px" height="' + trailimage[2] + 'px"></div>')

function gettrailobj() {
  if (document.getElementById)
    return document.getElementById("trailimageid").style;
  else if (document.all)
    return document.all.trailimagid.style;
}

function truebody() {
  return (!window.opera && document.compatMode && document.compatMode != "BackCompat") ? document.documentElement : document.body;
}

function hidetrail() {
  gettrailobj().visibility = "hidden";
  document.onmousemove = "";
}

var last_screenX = -1, last_screenY = -1;
var deltaX = 0, deltaY = 0;

function followmouse(e) {

  var xx = e.pageX, yy = e.pageY;

  if (isNaN(xx) && isFirefox) { //its called from window_resize
    //if (isFullScreen()) 
    xx = last_screenX + window.scrollX;
    yy = last_screenY + window.scrollY;
    if (!isFullScreen()) { //exit from fullscreen 
      //alert("exit");
      xx -=  deltaX;
      yy -= deltaY;
    }
  }

  //msg.innerHTML = "clientY: "+e.clientY+", pageY: "+e.pageY+", scrnY: "+e.screenY+", win.screenY: "+window.screenY;

  var xcoord = xx + offsetfrommouse[0];
  var ycoord = yy + offsetfrommouse[1];

  var docwidth = document.all ? truebody().scrollLeft + truebody().clientWidth : pageXOffset + window.innerWidth - 15;

  var docheight = document.all ? Math.max(truebody().scrollHeight, truebody().clientHeight) : Math.max(document.body.offsetHeight, window.innerHeight);

  if (xcoord + trailimage[1] + 3 > docwidth || ycoord + trailimage[2] > docheight)
    gettrailobj().display = "none";
  else
    gettrailobj().display = "";

  gettrailobj().left = xcoord + "px";
  gettrailobj().top = ycoord + "px";

  if (!isNaN(e.screenX)) {
    last_screenX = e.screenX;
    last_screenY = e.screenY;
  }

  if((e.screenY - e.clientY) > 5) { //not fullscreen. (in fullscreen it is 0 or 1)
    deltaX = e.screenX - e.clientX;
    deltaY = e.screenY - e.clientY;
  }
}

document.onmousemove = followmouse;
window.onresize = followmouse;  // *** new event handler is add

if (displayduration > 0)
  setTimeout("hidetrail()", displayduration * 1000);
</script>
</head>
<body>
Press F11 (make the browser window full screen) in Firefox
</body>
</html>

最佳答案

您应该添加 onresize 事件处理程序来检查用户是否进入全屏模式并计算鼠标在这种情况下的新位置。另外，当用户退出全屏时，我们应该重新计算其位置。我画了一些图，发现转换公式如下:

//when enter to FullScreen:
xx = last_screenX + window.scrollX;
yy = last_screenY + window.scrollY;

//when Exit from FullScreen:
xx = last_screenX + (e.screenX - e.clientX) + window.scrollX
yy = last_screenY + (e.screenY - e.clientY) + window.scrollY
当页面包含滚动条时，需要

window.scrollX 和 window.scrollY。

所以，最终的代码将是这样的:

<html>
<head>
  <title>Cursor</title>
</head>
<body>
  <script type="text/javascript">
  var isFirefox = (navigator.userAgent.toLowerCase().indexOf('firefox') > -1) || (typeof InstallTrigger !== 'undefined');

  function isFullScreen() { //helper func to detect if Firefox is in fullscreen
    if (window['fullScreen'] !== undefined) return window.fullScreen; //Firefox support this property
    return (screen.width == window.innerWidth) && (window.screenY == 0 || window.screenTop == 0) && Math.abs(screen.height - window.innerHeight) < 45;
  }

  document.body.style.cursor = 'none';
  var trailimage = ["http://2aek.com/images/cursors/cur1.gif", 32, 32]; //image path, plus width and height
  var offsetfrommouse = [-10, -5]; //image x,y offsets from cursor position in pixels. Enter 0,0 for no offset. also try [-10, -5]
  var displayduration = 0; //duration in seconds image should remain visible. 0 for always.

  if (document.getElementById || document.all)
    document.write('<div id="trailimageid" style="position:absolute; visibility:visible; display:none; left:0px; top:0px; width:1px; height:1px"><img src="' + trailimage[0] + '" border="0" width="' + trailimage[1] + 'px" height="' + trailimage[2] + 'px"></div>')

  function gettrailobj() {
    if (document.getElementById)
      return document.getElementById("trailimageid").style;
    else if (document.all)
      return document.all.trailimagid.style;
  }

  function truebody() {
    return (!window.opera && document.compatMode && document.compatMode != "BackCompat") ? document.documentElement : document.body;
  }

  function hidetrail() {
    gettrailobj().visibility = "hidden";
    document.onmousemove = "";
  }

  var last_screenX = -1, last_screenY = -1;
  var deltaX = 0, deltaY = 0;

  var trail = gettrailobj();
  var tbody = truebody();

  function followmouse(e) {

    var xx = e.pageX, yy = e.pageY;

    if (isNaN(xx) && isFirefox) { //its called from window_resize
      //if (isFullScreen()) 
      xx = last_screenX + window.scrollX;
      yy = last_screenY + window.scrollY;
      if (!isFullScreen()) { //exit from fullscreen 
        //alert("exit");
        xx -=  deltaX;
        yy -= deltaY;
      }
    }

    //msg.innerHTML = "clientY: "+e.clientY+", pageY: "+e.pageY+", scrnY: "+e.screenY+", win.screenY: "+window.screenY;

    var xcoord = xx + offsetfrommouse[0];
    var ycoord = yy + offsetfrommouse[1];

    var docwidth = document.all ? tbody.scrollLeft + tbody.clientWidth : pageXOffset + window.innerWidth - 15;
    var docheight = document.all ? Math.max(tbody.scrollHeight, tbody.clientHeight) : Math.max(document.body.offsetHeight, window.innerHeight);

    trail.display = (xcoord + trailimage[1] + 3 > docwidth || ycoord + trailimage[2] > docheight) ? "none" : "";

    trail.left = xcoord + "px";
    trail.top = ycoord + "px";

    if (!isNaN(e.screenX)) {
      last_screenX = e.screenX;
      last_screenY = e.screenY;
    }

    if((e.screenY - e.clientY) > 5) { //not fullscreen. (in fullscreen it is 0 or 1)
      deltaX = e.screenX - e.clientX;
      deltaY = e.screenY - e.clientY;
    }
  }

  document.onmousemove = followmouse;
  window.onresize = followmouse;  // *** new event handler is add

  if (displayduration > 0)
    setTimeout("hidetrail()", displayduration * 1000);

  </script>

  <div>Press F11 (make the browser window full screen) in Firefox</div>

</body>
</html>

关于JavaScript:鼠标坐标不正确(全屏模式下的 pageX 和 pageY)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42132146/

25 4 0
文章推荐： javascript - 如果输入为空，则以逐步形式放置错误类
文章推荐： css - 我正在尝试在不透明度的 css3 中创建摩擦渐变
文章推荐： html - Google Visualization API - 不显示工具提示
文章推荐： c++ - Turbo C++ 的字符串问题
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com