JavaScript 栏动画

发布于 2024-11-18 20:44:52 字数 227 浏览 4 评论 0原文

在此处输入图像描述

我上面有这张图片。我想根据汽车的转速显示部分图像。例如,当汽车启动时,只有底部的蓝色块可见,随着速度的增加,更多的块变得可见,一直到红线。一旦速度降低,方块就会消失。我对这个不知所措,我什至不知道从哪里开始。最初我正在考虑使每个块成为一个单独的图像,但我想知道是否有更好的方法来做到这一点。有什么想法吗?

enter image description here

I have this image above. I want to parts of the image to show depending on the RPM of the car. For example when the car starts only the bottom blue block is visible, as the speed increases more blocks become visible all the way to redline. Once the speed decreases the blocks disappear. I'm at a loss with this one i don't even know where to begin. Originally i was thinking of making each block a separate image but i was wondering if there was a better way of doing this. Any ideas?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

梦开始←不甜 2024-11-25 20:44:52

查看 Raphael JavaScript 库。根据您的 Javascript 经验,您可能会有一些学习曲线,但我认为您会更轻松地重新创建上面显示的内容并将所需的行为附加到每个形状,而不是尝试使用图像,特别是考虑到块的排列和方向。

更新:我创建了这个 fiddle,因为我认为这似乎是一个有趣的练习。我只使用了矩形块,但是如果您将鼠标悬停在绿色“油门”栏上,您将看到这些块是如何出现和消失的。

Check out the Raphael javascript library. Depending on your Javascript experience, you may have a bit of a learning curve, but I think you would have a much easier time recreating what you are showing above and attaching the desired behavior to each of the shapes, rather than trying to do it with images, particularly given the arrangement and orientation of the blocks.

UPDATE: I created this fiddle, as I thought this seemed like an interesting exercise. I just used rectangular blocks, but if you mouse over the green 'throttle' bar, you will see how the blocks are made to appear and disappear.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文