如何解决如何获取图像的位置并将另一个图像移动到该位置?
如何获取 .img 类的位置,然后将 .img-2 类移动到与 .img 相同的位置? 我知道我需要根据窗口位置获取 .img 的顶部和左侧位置,然后将这些值应用于我的anime.js 函数,但我没有正确执行...
在anime.js 函数中,我认为translateX 和translateY 值需要是.img 的值,但我可能错了?
Codepen 是 here,当您点击“BUTTON”链接时,我正在尝试实现这一点。
感谢任何帮助
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<a class="button" href="javascript:;">BUTTON</a>
</div>
<div class="col-lg-6">
<img class="img-2" src="https://picsum.photos/200/300" alt="">
</div>
</div>
<div class="row bottom-row">
<div>
<img class="img" src="https://picsum.photos/200/300" alt="">
</div>
</div>
</div>
.container {
background-color: grey;
height: 100vh;
}
.container-row {
display: flex;
flex-direction: column;
width: 100%;
}
.button {
cursor: pointer;
display: block;
}
.bottom-row {
height: 100vh;
background-color: red;
}
.img {
width: 200px;
height: auto;
marign-top: 100px;
display: block;
}
jQuery(document).ready(function ($) {
const etop = $('.img').offset().top; //get the offset top of the element
const eLeft = $('.img').offset().left; //get the offset top of the element
$('.button').on('click',function () {
alert(etop);
alert(eLeft);
anime({
targets: '.img-2',translateY: etop,translateX: eLeft,scaleX: 1,scaleY: 1,});
});
});
片段:
jQuery(document).ready(function ($) {
const etop = $('.img').offset().top; //get the offset top of the element
const eLeft = $('.img').offset().left; //get the offset top of the element
$('.button').on('click',});
});
});
.container {
background-color: grey;
height: 100vh;
}
.container-row {
display: flex;
flex-direction: column;
width: 100%;
}
.button {
cursor: pointer;
display: block;
}
.bottom-row {
height: 100vh;
background-color: red;
}
.img {
width: 200px;
height: auto;
marign-top: 100px;
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js "></script>
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<a class="button" href="javascript:;">BUTTON</a>
</div>
<div class="col-lg-6">
<img class="img-2" src="https://picsum.photos/200/300" alt="">
</div>
</div>
<div class="row bottom-row">
<div>
<img class="img" src="https://picsum.photos/200/300" alt="">
</div>
</div>
</div>
解决方法
首先,在图像完全加载之前,顶部和左侧偏移量保存在变量中。为避免这种情况,请在点击处理程序内移动 eTop
和 eLeft
行。
然后,你正在做一个翻译......所以你必须从“目标”中减去“要移动的元素”的初始位置。
jQuery(document).ready(function($) {
$('.button').on('click',function() {
// Target position
const eTop = $('.img').offset().top; //get the offset top of the element
const eLeft = $('.img').offset().left; //get the offset top of the element
// Element to be moved position
const bTop = $('.img-2').offset().top; //get the offset top of the element
const bLeft = $('.img-2').offset().left; //get the offset top of the element
//alert(eTop);
//alert(eLeft);
anime({
targets: '.img-2',translateY: eTop - bTop,translateX: eLeft - bLeft,scaleX: 1,scaleY: 1,});
});
});
.container {
background-color: grey;
height: 100vh;
}
.container-row {
display: flex;
flex-direction: column;
width: 100%;
}
.button {
cursor: pointer;
display: block;
}
.bottom-row {
height: 100vh;
background-color: red;
}
.img {
width: 200px;
height: auto;
marign-top: 100px;
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js "></script>
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<a class="button" href="javascript:;">BUTTON</a>
</div>
<div class="col-lg-6">
<img class="img-2" src="https://picsum.photos/200/300" alt="">
</div>
</div>
<div class="row bottom-row">
<div>
<img class="img" src="https://picsum.photos/200/300" alt="">
</div>
</div>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。