跳至主要內容
  • Hostloc 空間訪問刷分
  • 售賣場
  • 廣告位
  • 賣站?

4563博客

全新的繁體中文 WordPress 網站
  • 首頁
  • 想在页面上增加跟随鼠标的十字瞄准线, X 线偏移了,不得其解。。。
未分類
4 2 月 2021

想在页面上增加跟随鼠标的十字瞄准线, X 线偏移了,不得其解。。。

想在页面上增加跟随鼠标的十字瞄准线, X 线偏移了,不得其解。。。

資深大佬 : qazwsxkevin 10

    var ox = document.createElement('div');     var oy = document.createElement('div');     ox.style.width = '100%';     ox.style.height = '1px';     ox.style.backgroundColor = '#FF0000';     ox.style.position = 'fixed';     ox.style.left = 0;     document.body.appendChild(ox);     oy.style.height = '100%';     oy.style.width = '1px';     oy.style.backgroundColor = '#FF0000';     oy.style.position = 'fixed';     oy.style.top = 0;     document.body.appendChild(oy);     document.onmousemove = function (e) {         //写法一         var e = e || event;         var x = e.pageX;         var y = e.pageY;          //写法二         // var e = e || window.event;  //event 的兼容写法         // var x = e.pageX || e.clientX + scroll().left;  //获取 pageX 的兼容写法         // var y = e.pageY || e.clientY + scroll().top;          ox.style.top = y + 'px';         oy.style.left = x + 'px';     };      //写法二要用到的函数     function scroll() {         return {             "top": window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop,             "left": window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft         }     } 

Y 线是正常跟随鼠标的,X 轴向下偏移了半个屏幕,请教大家问题所在?
目前只试过 IE 和 Firefox,应该不是兼容问题? 只想在 Firefox 上能跑就可以了。。。

大佬有話說 (5)

  • 資深大佬 : IsaacYoung

    https://developer.mozilla.org/zh-CN/docs/Web/API/MouseEvent/pageX

    pageX 是一个由 MouseEvent 接口返回的相对于整个文档的 x (水平)坐标以像素为单位的只读属性。

    这个属性将基于文档的边缘,考虑任何页面的水平方向上的滚动。举个例子,如果页面向右滚动 200px 并出现了滚动条,这部分在窗口之外,然后鼠标点击距离窗口左边 100px 的位置,pageX 所返回的值将是 300 。

  • 資深大佬 : xiaoming1992

    你可以直接更换鼠标样式啊,不是更轻量吗

  • 主 資深大佬 : qazwsxkevin

    @IsaacYoung 明白了,感谢,修正过来了

    @xiaoming1992 表的纵横比较广阔( 64X128 ),第一列是序号,第一行是标题栏,没有十字线,会眼花的。

    本来还想着落到表格的格子上,对应 X,Y 的序号和标题栏高亮的,结果看起来,还是十字线比较靠谱。

  • 資深大佬 : xeaglex

    [https://www.w3school.com.cn/cssref/pr_class_cursor.asp]( https://www.w3school.com.cn/cssref/pr_class_cursor.asp)

  • 資深大佬 : MENGKE

    应该为 clientX 和 clientY

文章導覽

上一篇文章
下一篇文章

AD

其他操作

  • 登入
  • 訂閱網站內容的資訊提供
  • 訂閱留言的資訊提供
  • WordPress.org 台灣繁體中文

51la

4563博客

全新的繁體中文 WordPress 網站
返回頂端
本站採用 WordPress 建置 | 佈景主題採用 GretaThemes 所設計的 Memory
4563博客
  • Hostloc 空間訪問刷分
  • 售賣場
  • 廣告位
  • 賣站?
在這裡新增小工具