- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我试着用线条测验匹配两对。我左边有几张图片,右边有几张图片,当你点击这对图片时,我需要用线连接它。它应该适用于任何组合,因此如果我单击左侧的图像 1 和右侧的图像 3,它们应该与线连接。然后,如果我再次单击右侧的图像 1 和左侧的图像 2,则应删除上一行,并且需要在这两张图像之间制作新的一行。HTML 片段:
function lineDistance(x, y, x0, y0){
return Math.sqrt((x -= x0) * x + (y -= y0) * y);
};
function drawLine(a, b, line) {
var pointA = $(a ).offset();
var pointB = $(b).offset();
var pointAcenterX = $(a).width() / 2;
var pointAcenterY = $(a).height() / 2;
var pointBcenterX = $(b).width() / 2;
var pointBcenterY = $(b).height() / 2;
var angle = Math.atan2(pointB.top - pointA.top, pointB.left - pointA.left) * 180 / Math.PI;
var distance = lineDistance(pointA.left, pointA.top, pointB.left, pointB.top);
// Set Angle
$(line).css('transform', 'rotate(' + angle + 'deg)');
// Set Width
$(line).css('width', distance + 'px');
// Set Position
$(line).css('position', 'absolute');
if(pointB.left < pointA.left) {
$(line).offset({top: pointA.top + pointAcenterY, left: pointB.left + pointBcenterX});
} else {
$(line).offset({top: pointA.top + pointAcenterY, left: pointA.left + pointAcenterX});
}
}
new drawLine('.a', '.b', '.line');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="question">
<div id="old" class="left_side one_half svg left">
<a href="#" data-number="1"><img class="a" src="assets/svg/Kerze.svg"></a>
<a href="#" data-number="2"><img src="assets/svg/Telefon.svg"></a>
<a href="#" data-number="3"><img src="assets/svg/Schreibmaschine.svg"></a>
<a href="#" data-number="4"><img src="assets/svg/TV_old.svg"></a>
<a href="#" data-number="5"><img src="assets/svg/Zeitstopper.svg"></a>
<a href="#" data-number="6"><img src="assets/svg/Besen.svg"></a>
<a href="#" data-number="7"><img src="assets/svg/Waschen.svg"></a>
</div>
<div class="left_side one_half svg right">
<a href="#" data-letter="NS"><img src="assets/svg/Iwatch.svg"></a>
<a href="#" data-letter="RT"><img src="assets/svg/Laptop.svg"></a>
<a href="#" data-letter="TE"><img src="assets/svg/Staubsauger.svg"></a>
<a href="#" data-letter="IN"><img src="assets/svg/Waschmaschine.svg"></a>
<a href="#" data-letter="EI"><img src="assets/svg/TV_new.svg"></a>
<a href="#" data-letter="AL"><img src="assets/svg/Gluehbirne.svg"></a>
<a href="#" data-letter="BE"><img class="b" src="assets/svg/Iphone.svg"></a>
<div class="line"></div>
</div>
</div>
我设法在两个图像(从 a 类到 b 类)之间画一条线,并且它总是被计算为完全成直 Angular ,但我无法让它看起来像我上面描述的那样工作。有任何想法吗?谢谢。
最佳答案
var setLeft = false, setRight = false;
$('.leftSide img').click(function(){
$('.leftSide img').removeClass('a');
$(this).addClass('a');
setLeft = true;
new drawLine('.a', '.b', '.line');
});
$('.rightSide img').click(function(){
$('.rightSide img').removeClass('b');
$(this).addClass('b');
setRight = true;
new drawLine('.a', '.b', '.line');
});
您可以使用标志变量,当从右侧单击图像时,将右侧的标志变量设置为 true,并对另一个执行相同的操作。
然后在函数 drawLine
中检查两个标志是否为真然后在 a
和 b
之间画线并设置两个标志变量为 false
。
function lineDistance(x, y, x0, y0){
return Math.sqrt((x -= x0) * x + (y -= y0) * y);
};
function drawLine(a, b, line) {
if(setLeft && setRight){
setLeft = false;
setRight = false;
var pointA = $(a).offset();
var pointB = $(b).offset();
console.log(pointA);
console.log(pointB);
var pointAcenterX = $(a).width() / 2;
var pointAcenterY = $(a).height() / 2;
var pointBcenterX = $(b).width() / 2;
var pointBcenterY = $(b).height() / 2;
var angle = Math.atan2(pointB.top - pointA.top, pointB.left - pointA.left) * 180 / Math.PI;
var distance = lineDistance(pointA.left, pointA.top, pointB.left, pointB.top);
// Set Angle
$(line).css('transform', 'rotate(' + angle + 'deg)');
// Set Width
$(line).css('width', distance + 'px');
// Set Position
$(line).css('position', 'absolute');
if(pointB.left < pointA.left) {
$(line).offset({top: pointA.top + pointAcenterY, left: pointB.left + pointBcenterX});
} else {
$(line).offset({top: pointA.top + pointAcenterY, left: pointA.left + pointAcenterX});
}
}
}
//new drawLine('.a', '.b', '.line');
var setLeft = false, setRight = false;
$('.leftSide img').click(function(){
$('.leftSide img').removeClass('a');
$(this).addClass('a');
setLeft = true;
new drawLine('.a', '.b', '.line');
});
$('.rightSide img').click(function(){
$('.rightSide img').removeClass('b');
$(this).addClass('b');
setRight = true;
new drawLine('.a', '.b', '.line');
});
.left{
float:left;
}
.right{
float:right;
}
.one_half{
width:40%;
}
img{
max-width:100%;
}
.line{
background: red;
height:1px;
}
.question{
position: relative;
overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="question">
<div id="old" class="left_side one_half svg left leftSide">
<a href="#" data-number="1"><img src="https://www.w3schools.com/css/trolltunga.jpg"></a>
<a href="#" data-number="2"><img src="https://www.w3schools.com/css/trolltunga.jpg"></a>
<a href="#" data-number="3"><img src="https://www.w3schools.com/css/trolltunga.jpg"></a>
<a href="#" data-number="4"><img src="https://www.w3schools.com/css/trolltunga.jpg"></a>
<a href="#" data-number="5"><img src="https://www.w3schools.com/css/trolltunga.jpg"></a>
<a href="#" data-number="6"><img src="https://www.w3schools.com/css/trolltunga.jpg"></a>
<a href="#" data-number="7"><img src="https://www.w3schools.com/css/trolltunga.jpg"></a>
</div>
<div class="left_side one_half svg right rightSide">
<a href="#" data-letter="NS"><img src="https://www.w3schools.com/css/trolltunga.jpg"></a>
<a href="#" data-letter="RT"><img src="https://www.w3schools.com/css/trolltunga.jpg"></a>
<a href="#" data-letter="TE"><img src="https://www.w3schools.com/css/trolltunga.jpg"></a>
<a href="#" data-letter="IN"><img src="https://www.w3schools.com/css/trolltunga.jpg"></a>
<a href="#" data-letter="EI"><img src="https://www.w3schools.com/css/trolltunga.jpg"></a>
<a href="#" data-letter="AL"><img src="https://www.w3schools.com/css/trolltunga.jpg"></a>
<a href="#" data-letter="BE"><img src="https://www.w3schools.com/css/trolltunga.jpg"></a>
<div class="line"></div>
</div>
</div>
关于javascript - 用线条连接图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45367217/
我知道这个问题可能已经被问过,但我检查了所有这些,我认为我的情况有所不同(请友善)。所以我有两个数据集,第一个是测试数据集,第二个是我保存在数据框中的预测(预测值,这就是没有数据列的原因)。我想合并两
在 .loc 方法的帮助下,我根据同一数据框中另一列中的值来识别 Panda 数据框中某一列中的值。 下面给出了代码片段供您引用: var1 = output_df['Player'].loc[out
当我在 Windows 中使用 WinSCP 通过 Ubuntu 连接到 VMware 时,它提示: The server rejected SFTP connection, but it lis
我正在开发一个使用 xml web 服务的 android 应用程序。在 wi-fi 网络中连接时工作正常,但在 3G 网络中连接时失败(未找到 http 404)。 这不仅仅发生在设备中。为了进行测
我有一个XIB包含我的控件的文件,加载到 Interface Builder(Snow Leopard 上的 Xcode 4.0.2)中。 文件的所有者被设置为 someClassController
我在本地计算机上管理 MySQL 数据库,并通过运行以下程序通过 C 连接到它: #include #include #include int main(int argc, char** arg
我不知道为什么每次有人访问我网站上的页面时,都会打开一个与数据库的新连接。最终我到达了大约 300 并收到错误并且页面不再加载。我认为它应该工作的方式是,我将 maxIdle 设置为 30,这意味着
希望清理 NMEA GPS 中的 .txt 文件。我当前的代码如下。 deletes = ['$GPGGA', '$GPGSA', '$GPGSV', '$PSRF156', ] searchquer
我有一个 URL、一个用户名和一个密码。我想在 C# .Net WinForms 中建立 VPN 连接。 你能告诉我从哪里开始吗?任何第三方 API? 代码示例将受到高度赞赏... 最佳答案 您可以像
有没有更好的方法将字符串 vector 转换为字符 vector ,字符串之间的终止符为零。 因此,如果我有一个包含以下字符串的 vector "test","my","string",那么我想接收一
我正在编写一个库,它不断检查 android 设备的连接,并在设备连接、断开连接或互联网连接变慢时给出回调。 https://github.com/muddassir235/connection_ch
我的操作系统:Centos 7 + CLOUDLINUX 7.7当我尝试从服务器登录Mysql时 [root@server3 ~]# Mysql -u root -h localhost -P 330
我收到错误:Puma 发现此错误:无法打开到本地主机的 TCP 连接:9200(连接被拒绝 - 连接(2)用于“本地主机”端口 9200)(Faraday::ConnectionFailed)在我的
请给我一些解决以下错误的方法。 这是一个聊天应用....代码和错误如下:: conversations_controller.rb def create if Conversation.bet
我想将两个单元格中的数据连接到一个单元格中。我还想只组合那些具有相同 ID 的单元格。 任务 ID 名称 4355.2 参与者 4355.2 领袖 4462.1 在线 4462.1 快速 4597.1
我经常需要连接 TSQL 中的字段... 使用“+”运算符时 TSQL 强制您处理的两个问题是 Data Type Precedence和 NULL 值。 使用数据类型优先级,问题是转换错误。 1)
有没有在 iPad 或 iPhone 应用程序中使用 Facebook 连接。 这个想法是登录这个应用程序,然后能够看到我的哪些 facebook 用户也在使用该应用程序及其功能。 最佳答案 是的。
我在连接或打印字符串时遇到了一个奇怪的问题。我有一个 char * ,可以将其设置为字符串文字的几个值之一。 char *myStrLiteral = NULL; ... if(blah) myS
对于以下数据 - let $x := "Yahooooo !!!! Select one number - " let $y := 1 2 3 4 5 6 7 我想得到
我正在看 UDEMY for perl 的培训视频,但是视频不清晰,看起来有错误。 培训展示了如何使用以下示例连接 2 个字符串: #!usr/bin/perl print $str = "Hi";
我是一名优秀的程序员,十分优秀!