h5翻页动画

使用js实现微信小页面翻页的原理介绍

一笑奈何 提交于 2020-04-11 20:24:31
文中要介绍的内容是四个手机页面,手指向上或者向下滑动可以实现翻页的功能。由于代码比较简短,可能存在许多bug,思路可供大家参考。 1.实现方式介绍: 首先我们在页面写一个div----box,这个div又包含4个div---page1-page4; page1到page4每个div大小和屏幕一样大。 首先显示page1,使用js监听用户触摸事件,当用户滑动屏幕时,执行css动画,page1向上移动到出界面,page2向上移动到进入界面。动画执行完成后,需要使用js将page的属性-->动画类去掉,以免影响其下一步操作。 2.编写html代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title>WeChatPortPage</title> <link rel="stylesheet" type="text/css" href="css/index.css"/> <link rel="stylesheet" type="text/css" href="css/animation.css"/> </head> <body> <div