gpt4 book ai didi

javascript - JQuery ConnectingLine 插件没有正确定位线

转载 作者:太空宇宙 更新时间:2023-11-03 17:34:56 24 4
gpt4 key购买 nike

我已经尝试使用这个插件“jquery.connectingLine.js”,但我的线没有正确定位并且没有按预期连接 - image

我的 HTML:

<!DOCTYPE html>
<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.svg.min.js"></script>
<script type="text/javascript" src="js/jquery.connectingLine.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

<link href="css/tmc.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div class='img_all'>

<div class="img_logo1"><img src="images/img 1.png" alt="" /></div>

<div class="img_logo2"><img src="images/img 2.png" alt="" /></div>

<div class="img_logo3"><img src="images/img 3.png" alt="" /></div>
</div>

<script type="text/javascript">
var mySVG = $('body').connectSVG();
mySVG.drawLine({
left_node:'.img_logo1',
right_node:'.img_logo2',
horizantal_gap:10
});

$( ".img_logo1" ).draggable({
drag: function(event, ui){mySVG.redrawLines();}
});
$( ".img_logo1" ).draggable({
drag: function(event, ui){mySVG.redrawLines();}
});

</script>

</body>
</html>

CSS:

body {
background: #001a33;
}

.img_all img{
width: 10%;
height: auto;
}

.img_logo1 img {
position: absolute;
margin-left: 20%;
margin-top: 0;
width: 14%;
}

.img_logo2 img {
margin-left: 74%;
margin-top: 20%;
position: absolute;
width: 14%;
}

.img_logo3 img {
margin-left: 40%;
margin-top: 48%;
position: absolute;
}

最佳答案

好吧,我终于成功了——这是我的疏忽。在我需要引用图像文件的地方,我错过了“img”,因此它无法正常工作。所以不是left_node:'.img_logo1',它应该是left_node:'.img_logo1 img',

<script type="text/javascript">
var mySVG = $('body').connectSVG();
mySVG.drawLine({
left_node:'.img_logo1 img',
right_node:'.img_logo2 img',
horizantal_gap:10
});

$( ".img_logo1" ).draggable({
drag: function(event, ui){mySVG.redrawLines();}
});
$( ".img_logo1" ).draggable({
drag: function(event, ui){mySVG.redrawLines();}
});

</script>

关于javascript - JQuery ConnectingLine 插件没有正确定位线,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29898715/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com