Question

当我们构建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库可以解决这个问题？:-)

Answer 1

也许这可以帮到你：HTML Page Slide Without a Framework

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

Answer 2

像这样的东西？

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

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

Answer 3

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

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

[edit]根据您的技能，您可以尝试为滑动制作自己的香草（纯）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中，让它们根据我的需要滑动。如果你只在一定数量的页面之间滑动，这实际上非常简单

是否有一个JavaScript库可以处理整个页面幻灯片？

3 个答案: