- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时,我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
我创建 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/
我开始通过 Youtube 学习 Javascript,当我写下这段代码时,它说 pageX 未定义。我真的需要帮助。我正在开发一个捕获屏幕上鼠标位置的函数。并且请不要要求提供 HTML,因为它只是其
onClick a span,我必须在那个位置显示一条消息。所以我使用 e.pageX 来确定鼠标点击位置,因为可能有两个以上的跨度。它在决议中工作正常。如果我最大化分辨率,则消息显示在远离点击范围的
我正在使用 this custom JavaScript range slider .我将包装器 (.range-slider) 设置为以下内容: position:absolute; left: 6
我无法读取未定义的属性 pageX。 0 1 2 3
我在我的 phonegap 应用程序中使用了 intridea 的 sketch.js。修改后它工作正常 case 'touchstart': if (this.painti
因此,我使用从各种来源收集的以下代码来尝试计算出点击时图像的坐标: var naturalWidth = 690; var x = 0; var y = 0; var img = $('.imageT
有没有不使用 e.pageX 和 e.pageY 来定位任何元素的方法? 检查这个fiddle fiddle 实际上是对我要问的问题的一次糟糕尝试,但我认为一个视觉示例会更好。我想知道的是,是否可以通
所以,正如问题所指出的那样,有没有办法在 jQuery 中触发 mousemove 事件,同时将鼠标坐标发送到事件对象? 到目前为止,我的代码可以使用 .trigger(event) 函数触发 mou
我使用 jQuery 并从 jqueryUI 中拖动。当我将 jQuery 从 1.6 更新到 1.7 时,clientX 和 pageX 属性从事件变量中消失。这是一个例子: http://jsbi
我想覆盖所有事件的 event.pageX 和 event.pageY,因为 IE10+ 存在一个错误,有时会返回 pageX/Y 的浮点位置而不是整数。 最佳答案 据我所知,您无法覆盖此 nativ
我有一个事件来检测鼠标或触摸,并使用 setTimeout 将此事件发送到另一个函数。 我在检测鼠标或触摸事件时没有问题,我不能做的是将触摸事件发送到函数。 $(divst + ' #sortable
我一直在寻找一种让工具提示悬停在光标上方的方法,我看过很多建议使用事件 pageX 和 pageY 坐标如下: const showToolTip = (evt, text) => { let t
我正在尝试在鼠标滚轮事件时获取鼠标位置。 这是 fiddle 。 https://jsfiddle.net/xta2ccdt/7/ $("#container").on("mousewheel DOM
我创建 JavaScript 来获取鼠标坐标。 通过鼠标坐标显示图像的脚本(动画光标脚本 (с) Zac Ang Eng Keat): Cursor document.body.style.cu
好吧,“拆分”可能不是正确的词,我想要一个 div,如果你的鼠标在左半边执行一个功能,如果你的鼠标在右手边执行相反的功能。 在我在主 div 中设置两个额外的 div 并使用鼠标悬停来实现这一点之前,
我正在修改 js 中的 touchevents。我在 eclipse 的 logcat 中遇到过这个错误。 document.getElementById("squareBracket").
今天我发生了以下事情:我有一个现有的 mousemove 事件并稍后添加了 touchmove,如下所示: $(window).on "mousemove touchmove", (e) -> p
我正在尝试使用 jQuery 获取与 live 函数一起使用的 touchstart 事件的 X 位置? 即 $('#box').live('touchstart', function(e) { va
我试图在单击鼠标时将 div 放置在光标所在的位置。因此,当我使用 e.PageX 和 e.pageY 时,它实际上将我的 div 放置得比预期低得多。有什么想法吗? var mouseX = e.p
我正在 iPhone 上玩 touchstart 和 touchend 事件。我构建了一个示例页面,其中包含 div,如果您触摸它并滚动页面,它应该返回开始位置和结束位置的 y 坐标。 链接:http
我是一名优秀的程序员,十分优秀!