小编V02*_*460的帖子

我的网站上有一个可自由调整大小的元素.这是通过边缘上的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;
}