一堆站点,例如http://scaleofuniverse.com/,具有可缩放的界面,允许您"缩放"项目,以显示其中包含的"较小"项目。我一直在Flash中看到这一点,但我想知道如何使用JavaScript和CSS来实现。有没有开源库支持这个功能?
此外,我还看过impress.js,它有一些非常酷的功能,但我不确定使用这个库是否能够达到预期的效果。这只是使用正确的CSS样式的问题吗?
这个过程非常复杂,但它是可行的,这里有一篇关于如何实现它的好文章,用CSS3创建一个可缩放的用户界面,还有一个jQuery插件,它提供了你正在寻找的紧密效果Zoomooz。
如果接口元素是HTML元素,则可以展开该元素,直到它填满屏幕,同时将不透明度降低到0。该技术将取决于在可缩放的接口元素中使用的任何图像(可能使用background-size: cover
)。
您可以使用css转换或javascript来实现此效果。
我最终使用了zoom.js的精简版本,它提供了放大任何DOM元素的能力。它类似于Zoomooz,但没有那么臃肿,让我可以在不需要加载外部库的情况下隔离实现效果所需的几行代码。