点击事件实现图片相向移动碰撞返回，右上角图片定位故障求助

Hey there! Let's tackle this problem step by step. The core issue with using float: right here is that it yanks the element out of the normal document flow, which almost certainly messes up the position calculations your movement function depends on. Float is great for text wrapping, but it's not the right tool for precise, animatable positioning. Here's how to fix this and get your diagonal image collision animation working smoothly:

1. Fix the Positioning of Your Top-Right Image #

Instead of float: right, use absolute positioning inside a relatively positioned container. This gives you full control over the image's placement and ensures consistent position values for your animation logic.

<div class="container">
  <img src="your-left-image.jpg" class="moving-img img-top-left" alt="Top-left image">
  <img src="your-right-image.jpg" class="moving-img img-top-right" alt="Top-right image">
  <button id="triggerMovement">Start Movement</button>
</div>

.container {
  position: relative;
  width: 100vw;
  height: 80vh;
  border: 2px solid #ddd;
  overflow: hidden; /* Prevent images from sliding outside the container */
}

.moving-img {
  width: 120px;
  height: 120px;
  position: absolute;
  transition: none; /* We'll handle movement with JS, not CSS transitions */
}

.img-top-left {
  top: 0;
  left: 0;
}

.img-top-right {
  top: 0;
  right: 0;
}

#triggerMovement {
  margin: 1rem;
  padding: 0.5rem 1rem;
  font-size: 1rem;
}

2. Implement the Movement & Collision Logic #

We'll use requestAnimationFrame for smooth movement, getBoundingClientRect() to get accurate element positions, and a collision detection check to reverse directions when images hit each other.

const leftImg = document.querySelector('.img-top-left');
const rightImg = document.querySelector('.img-top-right');
const startBtn = document.getElementById('triggerMovement');

// Initial speed values (positive = right/down, negative = left/up)
let leftSpeedX = 4;
let leftSpeedY = 4;
let rightSpeedX = -4;
let rightSpeedY = 4;

let animationFrameId;

// Check if two images are colliding
function detectCollision() {
  const leftRect = leftImg.getBoundingClientRect();
  const rightRect = rightImg.getBoundingClientRect();

  // Collision happens if neither image is fully outside the other's bounds
  return !(
    leftRect.right < rightRect.left ||
    leftRect.left > rightRect.right ||
    leftRect.bottom < rightRect.top ||
    leftRect.top > rightRect.bottom
  );
}

// Update image positions each frame
function updatePositions() {
  const containerRect = document.querySelector('.container').getBoundingClientRect();

  // Update top-left image position
  let leftCurrentX = parseInt(window.getComputedStyle(leftImg).left);
  let leftCurrentY = parseInt(window.getComputedStyle(leftImg).top);
  
  leftCurrentX += leftSpeedX;
  leftCurrentY += leftSpeedY;

  // Bounce off container edges
  if (leftCurrentX <= 0 || leftCurrentX + leftImg.offsetWidth >= containerRect.width) leftSpeedX *= -1;
  if (leftCurrentY <= 0 || leftCurrentY + leftImg.offsetHeight >= containerRect.height) leftSpeedY *= -1;

  leftImg.style.left = `${leftCurrentX}px`;
  leftImg.style.top = `${leftCurrentY}px`;

  // Update top-right image position
  // Convert 'right' value to 'left' for easier calculation
  let rightCurrentX = containerRect.width - rightImg.offsetWidth - parseInt(window.getComputedStyle(rightImg).right);
  let rightCurrentY = parseInt(window.getComputedStyle(rightImg).top);
  
  rightCurrentX += rightSpeedX;
  rightCurrentY += rightSpeedY;

  // Bounce off container edges
  if (rightCurrentX <= 0 || rightCurrentX + rightImg.offsetWidth >= containerRect.width) rightSpeedX *= -1;
  if (rightCurrentY <= 0 || rightCurrentY + rightImg.offsetHeight >= containerRect.height) rightSpeedY *= -1;

  // Convert back to 'right' property to keep it aligned to the container's right
  rightImg.style.right = `${containerRect.width - rightCurrentX - rightImg.offsetWidth}px`;
  rightImg.style.top = `${rightCurrentY}px`;

  // Reverse direction on collision
  if (detectCollision()) {
    leftSpeedX *= -1;
    leftSpeedY *= -1;
    rightSpeedX *= -1;
    rightSpeedY *= -1;
  }

  animationFrameId = requestAnimationFrame(updatePositions);
}

// Bind click event to start/reset movement
startBtn.addEventListener('click', () => {
  // Stop any ongoing animation first
  cancelAnimationFrame(animationFrameId);
  
  // Reset images to starting positions
  leftImg.style.left = '0px';
  leftImg.style.top = '0px';
  rightImg.style.right = '0px';
  rightImg.style.top = '0px';

  // Reset speed to initial相向 direction
  leftSpeedX = 4;
  leftSpeedY = 4;
  rightSpeedX = -4;
  rightSpeedY = 4;

  // Start the animation
  updatePositions();
});

Key Fixes & Explanations #

• Why absolute positioning? Unlike float, absolute positioning keeps the element in a predictable, controllable position relative to its parent container. This makes getting and updating position values far more reliable for animations.
• getBoundingClientRect(): This method returns accurate, real-time position and size data for elements, which is crucial for collision detection and edge bouncing.
• Collision logic: We check if the two image rectangles overlap—if they do, we reverse each image's speed direction to make them bounce back.

Just replace the image src values with your own, adjust the speed values or image sizes as needed, and you should have a working click-triggered collision animation!

内容的提问来源于stack exchange，提问作者Wolk