jquery - Codrops - Jmpress.js响应式特性//识别函数和方法

Question

首先是文档:

插件站点:http://jmpressjs.github.io/jmpress.js/

Codrops 文章:http://tympanus.net/codrops/2012/04/05/slideshow-with-jmpress-js/

Codrops 演示:http://tympanus.net/Tutorials/SlideshowJmpress/

现在，我会请您调整浏览器的大小(仅限宽度)，以便您可以欣赏 slider 的内容如何以非常比例和响应的方式“适应”。

问题:我很想知道这是如何实现的(顺便说一句，如果我可以轻松地将它集成到 Pixedelic 的 Camera 插件中……这将是一个加分项)

伙计们，抱歉，如果提示是“稀有”。我非常喜欢前端，但我正在尝试与 jQuery 相处，并且可能在未来的某个时候与 AngularJS 相处......无论如何，这解释了这个问题。

拜托，我知道另一种处理方式是使用@media 查询，但我发现 Jmpress.js 处理它的方式非常有用和有趣。

提前致谢

Answer 1

正如 RedGlobe 指出的那样，解决方案是简单的 CSS3 转换。

这些应用于整个容器，一切都简单地按百分比缩放。

我将留下 CSS 代码来缩放元素:

.box_scale {
  -webkit-transform: scale(0.8);  /* Chrome, Safari 3.1+ */
     -moz-transform: scale(0.8);  /* Firefox 3.5+ */
      -ms-transform: scale(0.8);  /* IE 9 */
       -o-transform: scale(0.8);  /* Opera 10.50-12.00 */
          transform: scale(0.8);  /* Firefox 16+, IE 10+, Opera 12.10+ */
}

对于 IE8 支持，您可以使用 Matrix Transforms。 (更多信息:http://peterned.home.xs4all.nl/matrices/)

很抱歉这个愚蠢的问题，但这是一个很好的方法，我不知道。希望对别人有帮助