Tomorrow sixty-one the children (holiday), here I wish you all a happy weekend ahead, the company will inevitably introduced during the holidays demand h5 active page, this Children's Day is no exception, this time it was not to mention what product interaction the effect of demand, but according to UI sister of design, color-coded picture and the picture is too obvious, so they feel or do full-screen scrolling effect looks better, and therefore to be summed up in here ......
method one:
Renderings show (using a dynamic map LICEcap software):
Global code shows:
<!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>
方法二：
效果图如下：
整体代码如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>移动端滚屏效果</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"> <style type="text/css"> body,html{ width: 100%; height: 100%; margin: 0; padding: 0; } .g-fullPage{ width: 100%; height: 100%; overflow: hidden; } .g-fullPage div{ width: 100%; height: 100%; text-align: center; line-height: 100%; transition: 0.5s ease-in; } .g-fullPage div:nth-child(1){ background-color: #D5F1FD; } .g-fullPage div:nth-child(2){ background-color: aquamarine; } .g-fullPage div:nth-child(3){ background-color: mediumseagreen; } </style> </head> <body> <div class="g-fullPage"> <div class="f-pageFirst">1</div> <div>2</div> <div>3</div> </div> </body> <script type="text/javascript"> /* mainClass 滑动父容器类名 firstClass 第一页的类名 num 总页数 */ function fullPage(mainClass, firstClass, num) { var startX = 0, //初始横坐标 startY = 0, //初始纵坐标 marginTop = 0, //上下滑动变量 touchNum = 0, //上滑极限，是否可以上滑 touchFlag = true, //可滑动标志 true 可滑动，false 不可滑 bodyHeight = document.body.offsetHeight, page = document.getElementsByClassName(mainClass)[0], pageFirst = document.getElementsByClassName(firstClass)[0]; //获取触摸的初识坐标 page.addEventListener("touchstart",function(e){ e.preventDefault(); startX = e.targetTouches[0].clientX; startY = e.targetTouches[0].clientY; }) //重置触摸的坐标值 page.addEventListener("touchend",function(e){ e.preventDefault(); startX = 0; startY = 0; touchFlag = true; }) //监听并实现 上、下 滑动效果 page.addEventListener("touchmove",function(e){ e.preventDefault(); var newX = e.targetTouches[0].clientX, newY = e.targetTouches[0].clientY; if (newY - startY > 50) { if (touchFlag == true && touchNum > 0) { console.log("下滑"); touchFlag = false; marginTop += 1; touchNum -= 1; pageFirst.style.marginTop = marginTop * bodyHeight+"px"; } } else if (newY - startY < -50) { if (touchFlag == true && marginTop > -num+1) { console.log("上滑"); touchFlag = false; marginTop -= 1; touchNum += 1; pageFirst.style.marginTop = marginTop * bodyHeight+"px"; } } }) } fullPage("g-fullPage", "f-pageFirst",3); </script> </html>
总结：希望上面两种方法对大家有所帮助，最后，祝大家六一快乐啦！
参考博文：
https://blog.csdn.net/qq_38881495/article/details/83688999
https://www.cnblogs.com/pengfei-nie/p/9068568.html