2

当我们在构建 html5 web 应用或 ios 混合应用时，我们需要在 ios 应用中制作类似于视图转换的效果。

如：http: //jquerymobile.com/demos/1.1.0/docs/pages/page-transitions.html

过去我使用 jquery mobile 或 sencha touch 来处理它。

但是，您知道，jquery mobile 依赖于许多库或 css。（例如：jquery、jquerymobile.css 等）并且 sencha touch 太重了。

我只想找到一个简单的 javascript 库来帮助我处理这个问题。

我也希望这个库是纯粹且易于使用的。

有没有 javascript 库可以处理这个问题？:-)

4

3 回答 3

1

也许这可以帮助你：没有框架的 HTML 页面幻灯片

该解决方案非常轻量级，由一点 AJAX、一些 CSS 转换和 CSS 转换事件提供支持。同样重要的是要注意这仅适用于 WebKit。（本案例是针对 Android 和 iOS 的 PhoneGap 的移动应用程序，因此它只需要 WebKit 兼容性。）

于 2012-06-27T04:04:24.387 回答
0

像这样的东西？

http://buildinternet.com/project/supersized/slideshow/3.2/demo.html

jQuery 通常应该是最佳选择，因为它将确保它可以跨浏览器和平台工作。

于 2012-06-26T09:51:33.060 回答
0

您可能想看看Swipe，特别是因为这也适用于 iOS，因为它检测到滑动并且演示显示了对幻灯片的支持。

这里还有一些其他好的解决方案，在 Stack Overflow 上，关于这个问题：滑动整个网页你可能想看看那里的答案，接受的答案是滑动整个页面

[编辑]根据您的技能，您可以尝试为滑动制作自己的香草（纯）javascript 函数。这就是我最终做的，使用 html5 的 translate3d css 属性。

例如，这是我用来生成 css 代码的函数：

//generates transformation styles for Opera, Chrome, Firefox and IE
function genTransform (x, y, z, dur) {
    var genStyle = '-webkit-transform: translate3d(' + x + 'px, ' + y + 'px, ' + z + 'px); -webkit-transition: ' + dur + 'ms;' + 
                '-moz-transform: translate3d(' + x + 'px, ' + y + 'px, ' + z + 'px); -moz-transition: ' + dur + 'ms;' + 
                '-ms-transform: translate3d(' + x + 'px, ' + y + 'px, ' + z + 'px); -ms-transition: ' + dur + 'ms;' + 
                '-o-transform: translate(' + x + 'px, ' + y + 'px); -o-transition: ' + dur + 'ms;' +
                'transform: translate3d(' + x + 'px, ' + y + 'px, ' + z + 'px); transition: ' + dur + 'ms;';

    return genStyle;
}

然后我将样式应用到我的 div 以让它们根据我的需要滑动。如果你只在设定数量的页面之间滑动，实际上非常简单

于 2012-06-26T09:53:35.977 回答