javascript - 在列表之间绘制箭头

Question

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

因此，如果我将鼠标悬停在“项目 2”上，它会执行此操作(但是是一个直箭头):

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

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

Highlight item in two lists when mouseover

$(".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

您不必在此处使用二维绘图。检查一下:http://jsfiddle.net/vjYuW/ 我刚刚 fork 并更新了您在上面发布的 fiddle 。

这是基本代码，它处理 3 个 1 像素宽或高的 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.