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 的凸性(或任何你想调用它的东西)。为了开始获得这样的效果，您需要组合设置了 border-radius 的元素。那么让我们来看看这样的事情:

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(和一个容器来绝对正确地定位它们)就已经尽可能地拉伸(stretch)了它。尽管如此..这还是相当不错，即使它不能为您提供您正在寻找的确切形状。

当然，您可以想出任何您能想到的 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。