明天就六一儿童了（放假了），在这里提前祝大家周末快乐，每逢节假日公司必然会推出h5活动页的需求，这次六一儿童节也不例外，产品这次倒是没提什么互动效果需求，只不过根据UI妹子给的设计图，图片与图片中颜色区分过于明显，所以自己感觉还是做全屏滚动效果比较好看，因此在这里做个总结......
方法一：
效果图展示（动态图用的是LICEcap软件）：
全局代码展示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0" /> <meta name="format-detection" content="telephone=no" /> <meta content="yes" name="mobile-web-app-capable"> <meta content="yes" name="apple-mobile-web-app-capable" /> <meta http-equiv="Cache-Control" content="no-siteapp" /> <title>移动端h5活动整页滑屏</title> <style type="text/css"> *{padding:0;margin:0} body,html{height:100%;background-color:#fff} .wrap{width:100%;height:100%;overflow:hidden} .wrap2{width:100%;height:1000%;transition:.3s linear} .page{width:100%;height:10%;} </style> </head> <body> <div class="wrap" id="wrap"> <div class="wrap2" id="wrap2"> <img class="page" src="img/six01.png"/> <img class="page" src="img/six02.png"/> <img class="page" src="img/six03.png"/> <img class="page" src="img/six04.png"/> <img class="page" src="img/six05.png"/> <img class="page" src="img/six06.png"/> <img class="page" src="img/six07.png"/> <div class="img-eight page"> 这一块是input框，为了简化代码，易于理解去掉了 </div> </div> </div> <script type="text/javascript"> //重要！禁止移动端滑动的默认事件（这一块是移动端下拉的时候会触发到刷新事件，滑动图片会上不去） document.body.addEventListener('touchmove', function(event) { event = event ? event : window.event; if(event.preventDefault) { event.preventDefault() } else { event.returnValue = false } }, false) var pages = function(obj) { var box = document.getElementById(obj.wrap); var box2 = document.getElementById(obj.wrap2); var len = obj.len; var n = obj.n; var startY, moveY, cliH; //获取屏幕高度 var getH = function() { cliH = document.body.clientHeight }; getH(); window.addEventListener('resize', getH, false); //touchStart var touchstart = function(event) { if(!event.touches.length) { return; } startY = event.touches[0].pageY; moveY = 0; }; //touchMove var touchmove = function(event) { if(!event.touches.length) { return; } moveY = event.touches[0].pageY - startY; box2.style.transform = 'translateY(' + (-n * cliH + moveY) + 'px)'; //根据手指的位置移动页面 }; //touchEnd var touchend = function(event) { //位移小于+-50的不翻页 if(moveY < -50) n++; if(moveY > 50) n--; //最后&最前页控制 if(n < 0) n = 0; if(n > len - 1) n = len - 1; //重定位 box2.style.transform = 'translateY(' + (-n * 10) + '%)'; //根据百分比位置移动页面 console.log(n) }; //touch事件绑定 box.addEventListener("touchstart", function(event) { touchstart(event) }, false); box.addEventListener("touchmove", function(event) { touchmove(event) }, false); box.addEventListener("touchend", function(event) { touchend(event) }, false); }; pages({ wrap: 'wrap', //.wrap的id wrap2: 'wrap2', //.wrap2的id len: 8, //一共有几页，这里就是数字几 n: 0 //页面一打开默认在第几页？第一页就是0，第二页就是1 }); </script> </body> </html>