0

我有一个按钮,当你将鼠标悬停在它上面时,它开始磁化到光标,但内容(箭头)仍然存在,但我也需要它来磁化,怎么做?

这个网站上有一个例子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>

4

1 回答 1

0

您的代码在 CodeSandBox 和我的 Edge 中运行良好。(注释一些代码)

https://codesandbox.io/s/keen-jennings-kl3d5

如果在您的浏览器上不起作用,您可以在其他浏览器或平台上尝试

于 2021-09-09T07:46:11.503 回答