问题在列表之间绘制箭头

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

所以，如果我在“第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>

3072

2018-01-12 02:33

起源

答案:

您不必在此处使用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。

2018-01-12 03:53

您可以使用HTML5 canvas 实现这一目标的要素。

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

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

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

2018-01-12 03:16

嘿，很酷的东西:) - Yuji 'Tomita' Tomita

答案:

您不必在此处使用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。

2018-01-12 03:53

您可以使用HTML5 canvas 实现这一目标的要素。

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

2018-01-12 03:16

嘿，很酷的东西:) - Yuji 'Tomita' Tomita

我认为对于这样的事情你可能想要使用第三方绘图库，如矢量绘图库。

您可以从链接下载该库并将其添加到您的应用程序。然后：

将其包含在您的网页上：

<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() 在画布上。这里的画布是封闭两个列表的封闭div。

2018-01-12 03:14

<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();
}

2018-02-28 13:31

问题 在列表之间绘制箭头

答案:

答案:

热门问题

问题在列表之间绘制箭头