全屏模式

全屏模式

关注
发信
关注(28)粉丝(399)

javascript - JavaScript:鼠标坐标不正确(在全屏模式下为pageX和pageY)

我创建用于获取鼠标坐标的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>

10-06 00:52
Powered by LMLPHP ©2024 全屏模式 0.039365