想在页面上增加跟随鼠标的十字瞄准线, 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)