在列表之間繪製箭頭

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

您不必在這裏使用2D繪圖。看看這個：http://jsfiddle.net/vjYuW/ 我只是分叉和更新你上面張貼的小提琴。

這裏是必不可少的代碼，它處理3倍的DIV 1個像素寬或高的繪製線：

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 &有限公司

Answer 2

我認爲對於這樣的事情你可能想使用第三方繪圖庫，如Vector Draw Library。

您可以從鏈接下載庫並將其添加到您的應用程序。然後：

它列入您的網頁上：

<script type="text/javascript" src="wz_jsgraphics.js"></script> 

然後添加到您的懸停功能：

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

    //canvas is your drawing div 
    var jg = new jsGraphics("canvas"); 
    jg.drawLine($("#qq" + n).offset().left + 30, $("#qq" + n).offset().top , $("#aa" + n).offset().left, $("#aa" + n).offset().top); 
    jg.paint(); 

注意，您必須編寫代碼來刪除行的懸停功能否則一旦繪製它將保持。此外，我正在使用offset()來計算列表中項目的位置。這應該可以工作，但你可能需要調整一下才能看起來正確。

上述代碼有效，但不完整。也許懸停中的第二個功能可以在畫布上調用clear()。此處的Canvas是包含這兩個列表的封閉div。

Answer 3

您可以使用HTML5 canvas元素來實現此目的。

我不確定這是否是最好的辦法，但我擺弄並得到this。

我做的第一件事是我在div中附上了列表。 div使用CSS來設置相對位置。當你通過jQuery獲得這個職位時，情況就是這樣，它會給出一個相對於此的位置。接下來，我在列表前放置一個畫布，並在其上禁用指針事件。我還添加了一些東西來調整畫布的高度到列表的高度。然後我添加了另一個懸停處理程序。當你將鼠標懸停在上面時，它會畫出箭頭，當你懸停時，它會清除畫布。

繪製箭頭非常簡單。首先它得到物品的位置。然後它繪製一條線並使用一些數學來定向箭頭。獲得職位相當容易。對於正確的列表，您可以使用position方法。對於左側列表，我創建了一個臨時的span並將其附加到列表項中，然後獲得了該位置。

Answer 4

<script src='www.walterzorn.de/en/scripts/wz_jsgraphics.js'> </script> 

function drawLine(element1, element2) { 
    var jg = new jsGraphics("renderGraph"); 
    var ele1 = document.getElementById(element1); 
    var ele2 = document.getElementById(element2); 
    jg.setColor("#DDD"); 
    jg.setStroke(5); 
    jg.drawLine(ele1.offsetLeft + ele1.offsetWidth/2 , ele1.offsetTop + ele1.offsetHeight/2, ele2.offsetLeft + ele2.offsetWidth/2, ele2.offsetTop + ele2.offsetHeight/2); 
    jg.paint(); 
}