在列表之间绘制箭头

Question

有没有办法在两个突出显示的列表项之间动态绘制箭头？

因此,如果我在"第2项"上空盘旋它会做到这一点(但是直箭头):

Item 1            Highlight 3
Item 2-----\      Highlight 1
Item 3      ----->Highlight 2

这是我几分钟前得到的答案的代码:

鼠标悬停时突出显示两个列表中的项目

$(".list1 li, .list2 li").hover(function () {
    var n = this.id.substr(2);
    $("#qq" + n + ", #aa" + n).toggleClass("highlight");
});

jsfiddle:http://jsfiddle.net/e37Yg/1/

<ul class="list1">
    <li id="qq1">sdfsdv</li>
    <li id="qq2">bnvnvb</li>
    <li id="qq3">nmnutymnj7</li>
    <li id="qq4">cvbc</li>
    <li id="qq5">45tsgd</li>
</ul>

<ul class="list2">
    <li id="aa3">fgtbrtgb</li>
    <li id="aa1">vbn xgbn</li>
    <li id="aa5">vdgver</li>
    <li id="aa4">asdasdv</li>
    <li id="aa2">nvfbnfn</li>
</ul>

Answer 1

您可以使用HTML5 canvas元素来实现此目的.

我不确定这是否是最好的方法,但我摆弄并得到了这个.

我所做的是首先将列表括在一个div.在div与CSS样式有一个相对位置.当你使用jQuery获得位置时,它就是这样,它将给出相对于该位置的位置.接下来,我在列表前面放置一个画布并在其上禁用指针事件.我还添加了一些东西来调整画布的高度到列表的高度.然后我添加了另一个悬停处理程序.当您将鼠标悬停在它上面时,它会绘制箭头,当您将鼠标悬停时,它会清除画布.

绘制箭头非常简单.首先它获取物品的位置.然后它绘制一条线并使用一些数学来定向箭头.获得这些职位相当容易.对于正确的列表,您可以使用该position方法.对于左侧列表,我创建了一个临时的span并将其附加到列表项,然后得到了它的位置.

Answer 2

您不必在此处使用2D绘图.看看这个:http://jsfiddle.net/vjYuW/ 我只是分叉并更新了你上面发布的小提琴.

这是基本代码,它处理3个像素宽或高的DIV来绘制线条:

HTML:

...left list...
<div id="segment1" class="hline"></div>
<div id="segment2" class="vline"></div>
<div id="segment3" class="hline"></div>
...right list...

CSS:

... formatting for ULs here, both have to be float:left...

.highlight { background-color: red; }

.hline {    
    display:block;
    position:relative;
    float:left;
    height: 1px;
    width: 7em;  
}

.vline {
    display:block;
    position:relative;
    float:left;
    height: 1px;
    width: 1px;    
}

JavaScript:

$(".list1 li, .list2 li").hover(function () {
    var n = this.id.substr(2);
    var leftY = $('#qq' + n).position().top;
    var rightY = $('#aa' + n).position().top;
    var H = Math.abs(rightY-leftY);
    if (H == 0) H = 1;
    $('#segment1').css('top',leftY+'px');
    $('#segment3').css('top',rightY+'px');
    $('#segment2').css('top',Math.min(leftY,rightY)+'px');
    $('#segment2').css('height',H+'px');
    $("#qq" + n + ", #aa" + n + ",#segment1,#segment2,#segment3").toggleClass("highlight");
});

注意:您可能需要稍微调整一下以支持所有浏览器 - 我没有检查IE6&Co.