#滑屏

H5单页面手势滑屏切换原理

H5单页面手势滑屏切换是采用HTML5触摸事件(Touch)和CSS3动画(Transform,Transition)来实现的,效果图如下所示,本文简单说一下其实现原理和主要思路。实现原理假设有5个页面,每个页面占屏幕100%宽,则创建一个DIV容器viewport,将其宽度(width)设置为500%,然后将5个页面...

移动端整页滑屏示例

<!DOCTYPEhtml><html><head><metacharset="UTF-8"/><metaname="viewport"content="width=device-width,initial-scale=1,maximum-scale=1,user-...
代码星球 ·2021-02-14

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

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