Javascript 如何在两个div之间划一条线?
我现在正试图在一个div的右下角和另一个div的右上角之间画一条对角线。如果可能的话,我希望不使用jQuery。这可能吗? 由于CSS的限制,这将不适用于IE8或更低版本Javascript 如何在两个div之间划一条线?,javascript,html,Javascript,Html,我现在正试图在一个div的右下角和另一个div的右上角之间画一条对角线。如果可能的话,我希望不使用jQuery。这可能吗? 由于CSS的限制,这将不适用于IE8或更低版本 function getOffset( el ) { var rect = el.getBoundingClientRect(); return { left: rect.left + window.pageXOffset, top: rect.top + window.page
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;
}
当您看到+off1.width
和+off1.height
时,表示代码正在计算div底部或右侧的位置。删除+off1.width
或+off1.height
以获得div的左侧或顶部
编辑更新为更标准的getOffset函数。如果你想真正地分析,你可能还需要添加document.documentElement.client[Left/Top]并遍历offsetParent树,但是我认为getBoundingClientRect()和window.page[X/Y]Offset对于这样的例子来说已经足够了。有一种方法可以不用jQ来完成
1x1px
点您希望支持哪些浏览器?这些部门彼此之间的关系定位在哪里?您有没有遇到任何具体问题?如果没有,我将向您介绍与添加可拖动元素类似的问题,您可以忽略这些元素。。。这要容易得多。。。这是一个很好的解决方案,可以完全避免使用库,不过很遗憾,它在IE中不起作用。getOffset函数似乎有缺陷,因为它不适用于一堆重叠的绝对定位div。我用jQuery offset/height/width函数替换了get offset,这很有效。返回{top:$(el).offset().top,left:$(el).offset().left,width:$(el).width(),height:$(el).height()};简单而完美的解决方案!谢谢你的回答。注意:如果您使用的是jQuery,则应在函数末尾使用$(“body”).append(htmlLine)而不是“document.body.innerHTML+=htmlLine;”,以避免画布问题(如flot)。除了最后一行:document.body.innerHTML+=htmlLine;这似乎让其他处理者陷入困境。而是让div=document.createElement(“div”);div.style.cssText=所有样式内容;document.body.appendChild(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;