我的网站上有一个可以自由调整大小的元素。这是由边缘上的 4 个手柄完成的。在悬停这些句柄并调整元素大小时,我想显示相应的调整大小箭头。
目前,我通过将 body/root 的 css 光标样式设置为这些箭头来实现此行为。关于它的问题是对浏览器窗口客户区的限制。如果在按住鼠标时箭头光标随处可见,它将在视觉上更加一致且不易混淆。
谷歌地图在移动地图时用他们的手形光标做同样的事情。所以我的问题是如何自己实现这种效果。
我当前的(相关)来源:
function startObjectScaling(e){
e.stopPropagation();
e.preventDefault();
document.documentElement.style.cursor = this.style.cursor;
window.addEventListener("mouseup", stopObjectScaling, false);
}
function stopObjectScaling(e){
e.stopPropagation();
document.documentElement.style.cursor = '';
window.removeEventListener("mouseup", stopObjectScaling);
}
[...]
var tg = document.getElementById("transformGadget");
var handle = tg.firstChild.nextSibling;
for(var i=0;i<4;i++){
handle.addEventListener("mousedown", startObjectScaling, false);
handle = handle.nextSibling;
}