我有一个按钮,当你将鼠标悬停在它上面时,它开始磁化到光标,但内容(箭头)仍然存在,但我也需要它来磁化,怎么做?
这个网站上有一个例子https://www.m-trust.co.jp/,这是我的代码
我搜索了论坛,自己尝试过,但没有任何效果:(
function btnRun() {
// Двигающаяся кнопка
let offset = 70,
cur = false;
document.body.addEventListener('mouseenter', function(e) {
if (e.target.classList.contains('btn') && cur === false) {
cur = {
e: e.target,
x: e.target.getBoundingClientRect().left,
y: e.target.getBoundingClientRect().top
};
}
}, true);
document.addEventListener('mousemove', function(e) {
if (cur !== false) {
let x = (e.clientX - cur.x) - (cur.e.getBoundingClientRect().width / 2),
y = (e.clientY - cur.y) - (cur.e.getBoundingClientRect().height / 2);
cur.e.style.transform = `translate(${x}px,${y}px)`;
//
if (Math.abs(x) >= offset || Math.abs(y) >= offset) {
cur.e.style.transform = 'translate(0,0)';
cur = false;
}
}
});
}
btnRun();
.btn {
position: relative;
width: 69px;
height: 69px;
border-radius: 100%;
border: 0px;
background: #FF625B;
color: #fff;
font-size: 29px;
font-weight: 300;
text-align: center;
text-decoration: none;
padding-top: 15px;
transition: transform .2s linear;
margin-top: 20px;
}
span {
padding-top: 60px;
}
.intro {
position: relative;
display: flex;
width: 100%;
height: auto;
background: #447EF0;
}
.intro__inner {
position: relative;
display: flex;
width: 100%;
height: auto;
}
.intro__content {
width: 50%;
}
.intro__content__title {
color: #FFF;
padding-bottom: 40px;
padding-top: 173px;
}
.intro__content__text {
color: #fff;
max-width: 400px;
width: 100%;
padding-bottom: 40px;
}
.intro__block__btn {
display: flex;
width: 100%;
}
.intro__text__btn {
font-size: 16px;
font-weight: 500;
color: #fff;
padding-right: 20px;
padding-top: 25px;
}
.intro__block__img {
max-width: 50%;
width: 100%;
padding-top: 102px;
padding-bottom: 25px;
padding-right: 100px;
padding-left: 50px;
}
.intro__img {
float: right;
max-width: 674px;
width: 100%;
}
.intro__footer {
display: flex;
width: 100%;
}
.intro__info {
width: 95%;
display: flex;
padding-top: 45px;
padding-bottom: 80px;
color: #fff;
}
.intro__info span {
padding-right: 7px;
}
.intro__info h2 {
font-size: 20px;
font-weight: 600;
padding-right: 80px;
}
.intro__info h2:last-child {
padding-right: 0px;
}
.intro__h2__one {
order: 1;
}
<div class="intro__block__btn">
<p class="intro__text__btn">Записаться </p>
<a href="#form" class="btn btn-intro">
<span>--></span>
</a>
</div>