javascript - 有没有办法制作一个类似 DVD 屏幕保护程序的 HTML 元素，而不需要 marquee 标签？

Question

我的代码是这样的:

<div style="border: 2px solid black">
    <marquee behavior="alternate" direction="down" width="100%" height="100%">
        <marquee behavior="alternate" width="100%">
            <button onClick="addPoints(1)">+1</button>
        </marquee>
    </marquee>
</div>

这使得它在盒子容器(边框)内完美地弹跳。然而，Marquee 标签已经过时，它不能让我对盒子进行足够的控制。是否有使用 jquery、javascript、CSS 或 HTML 的替代解决方案？我需要能够控制速度、检测它何时撞到一侧，并找到按钮的 X 和 Y。

我之前有一个可行的解决方案，但它不允许我在同一点停止并恢复动画(我需要能够)。我见过 Marquee 的其他替代方案，但似乎没有一个能按照我想要的方式工作，因为它们使用 Marquee 的常规使用而不是 behavior="alternate" 设置。我在 javascript 方面经验丰富，但 jquery 对我来说是新的，所以任何解释都值得赞赏。谢谢!

Answer 1

您还可以使用 CSS 动画。我对 CSS 不熟悉，所以我不能让它不超出容器的边界，但这应该给你一个起点。

.bounds {
  border: 5px red solid;
  width: 200px;
  height: 300px;
}

@keyframes hor-movement {
  from {
    margin-left: 0%;
  }
  to {
    margin-left: 100%;
  }
}

@keyframes ver-movement {
  from {
    margin-top: 0%;
  }
  to {
    margin-top: 100%;
  }
}

.image {
  animation-name: hor-movement, ver-movement;
  animation-duration: 3.141s, 1.414s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: linear;
}

<div class="bounds">
  <img class="image" src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/apple/279/thinking-face_1f914.png"> </img>
</div>
</div>