跳到主要内容

创建一个除了CSS之外的旋转木马

轮播脚本在Web上的许多网站上使用 - 该模式已在所有地方实施。它们通常依赖于诸如jQuery之类的库,并且加载了许多动画和功能。现代浏览器非常强大。我们不能抛弃脚本而是使用CSS吗?天啊,我们可以!

画廊CSS是一个全CSS的旋转木马,不需要任何JavaScript。它使用部署良好的CSS功能,并依赖简单的标记(和类)约定来工作。很简单,我们可以多年来一直在构建像Gallery CSS这样的库!

特征

Gallery CSS没有依赖关系(甚至没有一行脚本)。简单地说Gallery.cssGallery.theme.css,做任何你喜欢的定制,你就关闭了!如果您希望旋转木马自动循环其项目,您只需添加自动播放类。有三件以上的东西?从中更改课程项目-3项目-4

遵循简单的标记约定为您提供了极大的灵活性 - 您可以在屏幕上拥有多个库,使用AJAX注入它,无论如何。尝试用JavaScript做到这一点!由于Gallery CSS带有MIT许可证,因此您可以在项目中不受限制地使用它。

因为Gallery CSS是使用CSS过渡和动画编写的,所以所有动画都由GPU处理,这意味着它比使用标准jQuery库的性能要好得多动画()

这个怎么运作

所有动画都是使用CSS过渡和动画完成的,这意味着它们在受支持的情况下是硬件加速的。

用户交互性通过很少使用来处理:目标选择。有许多微小的细节使Gallery CSS打勾,所以值得深入挖掘源代码。

我可以一直使用它吗?

您可能知道,IE 8都不支持:目标也不是CSS过渡或动画。虽然通过添加脚本来支持这些CSS功能来使Gallery CSS在旧浏览器中工作是完全可能的,但它可能不值得(取决于您的项目)。

通过添加jQuery,jQuery扩展选择器和/或Selectivizr,您将获得Gallery CSS在旧版本的IE中正常工作。但问问自己,是否值得额外的重量?我认为事实并非如此。如果您必须支持旧版浏览器,那么您可能应该首先使用jQuery插件。这正是jQuery(至少1.9版本)的目的。

否则,我相信我们应该展望未来,尽可能使用Gallery CSS等解决方案,并建立对没有脚本可以做什么的强烈理解!

话: 本施瓦茨

Ben Schwarz是来自澳大利亚墨尔本的网站开发人员。他对社区(作为创意和建设者),构建工具和网络的未来感兴趣。他写文章关于建立网络。

喜欢这个?阅读这些!



翻译字数超限