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

问题描述：

当我们构建html5 web应用程序或ios混合应用程序时，我们需要在ios应用程序中创建一个类似于视图转换的效果。有没有一个JavaScript库可以处理整个页面幻灯片？

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

在过去使用jQuery移动或煎茶触摸来处理它。

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

我只想找到一个简单的JavaScript库，可以帮助我处理这个问题。

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

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

答

页一组数字之间滑动，也许这可以帮助你：HTML Page Slide Without a Framework

的解决方案是非常轻便，是由一个小AJAX，一些CSS转换和CSS转换事件驱动。同样重要的是要注意，这只适用于WebKit。（这种情况是针对PhoneGap针对Android和iOS的移动应用程序，因此它只需要WebKit兼容性。）

非常感谢... –

答

这样的东西？

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

的jQuery应该generaly是最好的选择，因为它会确保它的工作原理跨浏览器和平台。

Emm ...此演示在单个页面中显示幻灯片。但我想要的是，当我使用元素链接到另一个页面，页面过渡效果可以幻灯片。只需整页滑动。:-) –

答

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

有这里提出，在Stack Overflow上其他一些很好的解决方案，在这个问题上：Sliding An Entire Web Page你可能想看看答案在那里，接受了一个确实为

整个页面的滑动

[编辑]根据你的技能，你可以尝试为滑动做出自己的香草（纯）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库可以处理整个页面幻灯片？

相关推荐