JavaScript 栏动画
我上面有这张图片。我想根据汽车的转速显示部分图像。例如,当汽车启动时,只有底部的蓝色块可见,随着速度的增加,更多的块变得可见,一直到红线。一旦速度降低,方块就会消失。我对这个不知所措,我什至不知道从哪里开始。最初我正在考虑使每个块成为一个单独的图像,但我想知道是否有更好的方法来做到这一点。有什么想法吗?
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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
查看 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.