如何在光标进入时将按钮移到光标附近，而在光标离开时如何移远一点

Posted 2023-02-14

我正在尝试创建一个鼠标移动动画。当光标靠近按钮时，我称之为borderline-距按钮一定距离，按钮将移至光标方向。

这里，为了清楚和理解，我用css显示了两个用borderline划线的步骤。我通过计算按钮的中心点并减小并为x和y轴添加按钮的宽度和高度，从代码创建了最近的borderline。

并且我想通过与我相同的方法来解决此问题，而不是通过将其他event-listener添加到按钮的parent-elements。

这是我尝试过的。。

const button = document.querySelector(".button");
let  width, height, x: buttonX, y: buttonY  = button.getBoundingClientRect(); // gives you width, height, left-X,top-y of the button

buttonX = buttonX + width / 2; //  center point of button on x-axis
buttonY = buttonY + height / 2; //  center point of button on y-axis

/*************** Functions ***************/

let distance = width;
let mouseHasEntered = true;
let mouseIsInButtonTerritory;

function mouseMove(e) 
  const x = e.x; // current x of cursor
  const y = e.y; // current y of cursor

  const leftBorderLine = buttonX - distance;
  const rightBorderLine = buttonX + distance;
  const topBorderLine = buttonY - distance;
  const bottomBorderline = buttonY + distance;
  const xWalk = (x - buttonX) / 2; // the distance to move the button when mouse moves on X axis
  const yWalk = (y - buttonY) / 2; // the distance to move the button when mouse moves on Y axis

  mouseIsInButtonTerritory =
    x > leftBorderLine &&
    x < rightBorderLine &&
    y > topBorderLine &&
    y < bottomBorderline; // becomes true if  mouse is inside all of these border-line

  if (mouseIsInButtonTerritory) 
    if (mouseHasEntered) 
      // this must happen only once to create outside borderline
      //creating another level borderline by incresing distance;
      // while cursor is returing the button comes out of nearest border-line and return from this borderline
      distance = distance + distance;
      mouseHasEntered = false;
    
    catchCursor(xWalk, yWalk); // call the function when mouse in in the button's territory
   else 
    resetPositon();
  


function catchCursor(xWalk, yWalk) 
  // translates the button in the direction where cursor is.
  button.style.transform = `translate($xWalkpx, $yWalkpx)`;


function resetPositon() 
  // resets the postion of the button as it was initial.
  button.style.transform = `translate($0px, $0px)`;
  mouseHasEntered = true;
  // when button is return to it's position (mouseHasEntered = true) lets to increase the initial borderline of button for the next time


/*************** Event-handler ***************/

window.addEventListener("mousemove", mouseMove);
window.addEventListener("mouseout", resetPositon);
*,
*::before,
*::after 
  margin: 0;
  padding: 0;
  box-sizing: border-box;


:root 
  --gutter-lg: 4rem;
  --gutter-md: 3rem;
  --gutter-sm: 1rem;
  --gutter-xm: 1rem;
  --color-white: #fff;
  --color-black: #000;


body 
  background: var(--color-black);
  font: 16px verdana;
  color: var(--color-white);


.banner 
  display: flex;
  height: 100vh;


.button 
  margin: auto;
  cursor: pointer;
  transition: all 0.2s ease-out;


.button-wrap-wrapper 
  width: 192px;
  height: 192px;
  border: 1px dashed #fff;
  margin: auto;
  display: flex;


.button-wrap 
  width: 128px;
  height: 128px;
  margin: auto;
  /* background: orange; */
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px dashed #fff;


.button__like-text 
  display: block;
  color: var(--color-black);
  background: var(--color-white);
  width: var(--gutter-lg);
  height: var(--gutter-lg);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
<section class="banner">
      <div class="button-wrap-wrapper">
        <div class="button-wrap">
          <div class="button">
            <span class="button__like-text">
              Like
            </span>
          </div>
        </div>
      </div>
    </section>

无法正常工作的是：mouseIsInButtonTerritory变为真实，我在这里尝试增加borderline

 if (mouseHasEntered) 
      // this must happen only once to create outside borderline
      //creating another level borderline by incresing distance;
      // while cursor is returing the button comes out of nearest border-line and return from this borderline
      distance = distance + distance;
    
按钮一直保持跟随光标。

我要解决的问题是，如果光标从两个borderline

中都出来，则按钮必须越过第一个borderline并靠近最后一个borderline，然后返回到该位置处于初始阶段。

我没有走错地方。是否有缺少的任何东西？

我正在尝试创建一个鼠标移动动画。当光标靠近按钮时，我将其称为边界线-距按钮一定距离，按钮将移至光标方向。在这里我...

答案

如果我正确理解了您的意图，我认为您需要：

另一答案

• 您应在鼠标离开时重置距离。