jQuery/CSS 显示两列之间的合并样式关系，如 FileMerge

Question

我想在不同的列中并排向最终用户显示两个文档。左侧的文档引用了右侧的文档。我想通过突出显示左栏中进行引用的文本和右侧引用的文本来显示这种关系。使用基本的 CSS 就很容易做到这一点。然而，我想更进一步，实际上在两列之间建立连接。

我认为屏幕截图是解释我想要完成的任务的最简单方法。

重要的是，两列彼此独立滚动，但连接两个突出显示部分的线应保持准确，并随着列滚动而更新。

有没有一种方法可以在不使用 Flash 或 HTML 5 Canvas 的情况下完成此任务？是否有任何现成的 jQuery 插件可以完成此任务？

Answer 1

据我所知，唯一做类似事情的是 jsdifflib 。如果我是你，我会搜索该库的源代码并将其转换为 jQuery 插件。然后，我会找出它在哪里绘制并排数据并插入您自己的渲染逻辑。您想要发生的事情可以仅使用 CSS 来完成，但是需要对 border-radius 属性进行一些认真的修改(它比 <canvas> 元素有更多的浏览器范围实现(尽管 2d <canvas> 的上下文变得相当广泛)。

例如，您可以通过执行以下操作从常规 div 中制作一个圆圈:

HTML

<div id="test"></div>

CSS

#test {
    width:50px;
    height:50px;
    border-radius:25px;
    background-color:#333;
}

产量:

关于 border-radius 属性的不幸之处在于，您不能使用负半径来翻转 Angular 的凸度(或任何您想要的名称)。为了开始获得这样的效果，您需要组合设置了边框半径的元素。那么让我们看一下这样的内容:

HTML

<div id="container">
    <div id="test"></div>
    <div id="covertest"></div>
</div>

CSS

#container {
    position:relative;
}

#test {
    position:absolute;
    width:200px;
    height:200px;
    background-color:#333;
}

#covertest {
    position:absolute;
    width:200px;
    height:100px;
    top:100px;
    background-color:#eee;
    border-top-right-radius:200px 100px;
}

产量:

现在，真正烦人的一点是，我只使用两个 div(以及一个绝对正确放置它们的容器)就可以得到它。尽管如此......这仍然相当不错，即使它没有给你你正在寻找的确切形状。

当然，你可以想出任何你能想到的 div 组合，所以跟我一起动动脑子，看看你想不出什么。我将对此进行更多修改，看看我能做些什么。

编辑:好吧，我对如何执行此操作进行了更多思考，并且提出了一个可行的解决方案。考虑一下:

HTML

<div id="container">
    <div id="covertestleft"></div>
    <div id="covertestmiddle"></div>
    <div id="coverbottomright"></div>
    <div id="covertestright"></div>
</div>

CSS

#container {
    position:relative;
    width:200px;
    height:200px;
    background-color:#333;
    overflow:hidden;
}

#covertestleft {
    position:absolute;
    width:40px;
    top:100px;
    bottom:0px;
    background-color:#eee;
    border-top-right-radius:40px 40px;
}

#covertestmiddle {
    position:absolute;
    top:109px;
    bottom:-50px;
    left:25px;
    border-left:160px solid #eee;
    border-right:50px solid transparent;
    border-top:85px solid transparent;
}

#covertestright {
    position:absolute;
    right:0px;
    bottom:8px;
    width:30px;
    height:100px;
    background-color:#333;
    border-bottom-left-radius:40px 10px;
}

#coverbottomright {
    position:absolute;
    right:0px;
    bottom:0px;
    width:30px;
    height:100px;
    background-color:#eee;
}

产量:

这与您想要达到的效果非常接近。您可以做的是创建一个类，在给定尝试连接的两个 block 的特定宽度和高度的情况下，生成此类 block 。需要了解这些 CSS 属性的本质，才能将其转换为不同的宽度和高度值，但这并非不可能。

除了这个解决方案之外，我相当确定除了使用 <canvas> 之外没有其他方法可以完成此任务。元素或第三方插件，如 Flash 或 Silverlight。