我目前正在尝试在一个div的右下角到另一个div的右上角之间绘制一条对角线。如果可能的话,我想不用jQuery。这可能吗?
由于CSS限制,这不适用于IE8或更低版本。
function getOffset( el ) { var rect = el.getBoundingClientRect(); return { left: rect.left + window.pageXOffset, top: rect.top + window.pageYOffset, width: rect.width || el.offsetWidth, height: rect.height || el.offsetHeight }; } function connect(div1, div2, color, thickness) { // draw a line connecting elements var off1 = getOffset(div1); var off2 = getOffset(div2); // bottom right var x1 = off1.left + off1.width; var y1 = off1.top + off1.height; // top right var x2 = off2.left + off2.width; var y2 = off2.top; // distance var length = Math.sqrt(((x2-x1) * (x2-x1)) + ((y2-y1) * (y2-y1))); // center var cx = ((x1 + x2) / 2) - (length / 2); var cy = ((y1 + y2) / 2) - (thickness / 2); // angle var angle = Math.atan2((y1-y2),(x1-x2))*(180/Math.PI); // make hr var htmlLine = "<div style='padding:0px; margin:0px; height:" + thickness + "px; background-color:" + color + "; line-height:1px; position:absolute; left:" + cx + "px; top:" + cy + "px; width:" + length + "px; -moz-transform:rotate(" + angle + "deg); -webkit-transform:rotate(" + angle + "deg); -o-transform:rotate(" + angle + "deg); -ms-transform:rotate(" + angle + "deg); transform:rotate(" + angle + "deg);' />"; // // alert(htmlLine); document.body.innerHTML += htmlLine; }
编辑(对于其他有相同问题的用户) :
例如,如果需要从不是右上角和右下角div的两个角创建一条线,请转到代码的此部分:
// bottom right var x1 = off1.left + off1.width; var y1 = off1.top + off1.height; // top right var x2 = off2.left + off2.width; var y2 = off2.top;
您在+ off1.width和处看到+ off1.height的位置,这意味着代码正在计算div底部或右侧的位置。删除+ off1.width或+ off1.height即可获得div的左侧或顶部。
+ off1.width
+ off1.height
编辑 已更新为更标准的getOffset函数。如果您想真正肛门,您可能还必须添加document.documentElement.client [Left / Top]并遍历offsetParent树,但我认为getBoundingClientRect()和window.page [X / Y] Offset足以满足要求这样的例子。