利用轮播原理结合hammer.js实现简洁的滑屏功能_html/css_WEB-ITnose

最近有个任务，做一个非常小的h5的应用，只有2屏，需要做横向的全屏滑动切换和一些简单的动画效果，之前做这种东西用的是fullpage.js和jquery，性能不是很好，于是就想自己动手弄一个简单的东西来实现。最后我用zepto + hammer.js 和轮播的方式解决了这个问题，效果还不错，整个页面不开启Gzip时所有资源请求的数据大小为200KB左右。这篇文章总结下这个方法的实现思路。

效果演示（代码下载）：

1. 实现要点

1）滑屏借鉴bootstrap的carousel插件，不过完全没有它那个复杂，只需要借鉴它的轮播实现思路即可；

2）滑屏切换的触发，跟PC不一样，PC通常都是通过元素的点击回调来触发，对于滑屏的页面，完全可以利用window的hashchange事件来处理，这样只要通过超链接设置锚点或者通过js改变location.hash就能触发切换；

3）考虑到移动还得支持手势操作，可以使用hammer.js这个手势库，API非常简单易用；

4）动画效果可以用animate.css，不过不用把它所有的代码都弄到代码里，只需要拷贝需要的动画效果相关的代码即可；

5）替代jquery，首选zepto；

6）滑屏效果使用transition动画，为了能够响应动画结束的回调，可以考虑使用transition.js，这个也是Bootstrap提供的工具，不过它默认只能跟jquery使用，要对它稍微改变一下才能跟zepto联合使用。

这些要点说的比较粗糙，后面的内容会一一详细介绍。

2. html结构

空的滑屏页的html结构是这样的：

      
查看更多关于利用轮播原理结合hammer.js实现简洁的滑屏功能_html/css_WEB-ITnose的详细内容...
        

          
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did114223