如何实现点击一次将块元素平移100px且最大限制800px？

实现思路 #

• 用变量维护当前平移距离，初始值设为0
• 监听块元素的点击事件，每次点击判断当前距离是否小于800px，满足条件则增加100px
• 通过CSS的transform: translateX()更新元素位置，搭配过渡动画优化交互体验

完整代码示例 #

HTML

<div class='box'></div>

CSS

.box {
  width: 100px;
  height: 100px;
  background-color: #4285F4;
  transition: transform 0.3s ease; /* 平滑过渡动画 */
}

JavaScript

const box = document.querySelector('.box');
let currentPosition = 0;

box.addEventListener('click', () => {
  if (currentPosition < 800) {
    currentPosition += 100;
    box.style.transform = `translateX(${currentPosition}px)`;
  }
});

说明 #

• 初始位置为0px，每次点击后平移距离增加100px，最多点击8次后停在800px位置
• 超出800px上限后，点击操作不再触发位移变化
• 过渡动画让位移过程更流畅，可根据需求调整transition属性值

内容的提问来源于stack exchange，提问作者Андрей