有没有办法在没有选取框标签的情况下制作类似 DVD 屏幕保护程序的 HTML 元素？

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 的其他替代方案，但 none 似乎按照我希望的方式工作，因为它们使用常规使用的 marquee 而不是 behavior="alternate" 设置。我在 javascript 方面经验丰富，但 jquery 对我来说是新手，因此不胜感激。谢谢！

Answer 1

经过几分钟的研究，我在 github 上找到了一个开源代码库：https://github.com/AlessioMaddaluno/bouncing-dvd-logo。这是一个用普通 JS 编写的弹跳 DVD 标志。你可以控制速度并且它有点检测（我不确定它是否是你想要的那种检测）。但是，它仅适用于图像。

Answer 2

您还可以使用 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>

有没有办法在没有选取框标签的情况下制作类似 DVD 屏幕保护程序的 HTML 元素？

Is there a way to make a DVD screensaver-like HTML element without the marquee tag?

html

javascript

jquery

css-animations

jquery-animate