H5-移动端实现滑屏翻页-原生js/jquery
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>触摸滑屏</title> <style> html,body,h2 { margin: 0; padding: 0; } html,body,#wraper,#content { width: 100%; height: 100%; } #wraper { overflow: hidden; } #content { transition: all 1s linear; } .page { width: 100%; height: 100%; } #page1 { background: #f00 } #page2 { background: #0f0 } #page3 { background: #00f } </style> </head> <body> <div id="wraper"> <div id="content"> <div class="page" id="page1"> page1 </div> <div class="page" id="page2"> page2 </div> <div class="page" id="page3"> page3 </div> </div> </div> <script> var page1 = document.getElementById('page1'), //滑动item page2 = document.getElementById('page2'), page3 = document.getElementById('page3'), wraper = document.getElementById('wraper'), content = document.getElementById('content'); //滑动容器 var itemHeight = wraper.offsetHeight; //滑动item高度 var index = 0; //滑动计数 var moveY, //滑动距离 endY, //滑动停止的Y坐标 startY; //滑动开始的Y坐标 // content.style.height = (itemHeight * 3) + 'px' // 触摸开始 function boxTouchStart(e) { console.log(e) var touch = e.touches[0]; startY = touch.pageY; endY = content.style.webkitTransform; if(!endY){ endY = 0; }else{ endY = parseInt(endY.replace('translateY(','')) } } // 触摸结束 function boxTouchEnd(e) { console.log(e) } // 触摸移动 function boxTouchMove(e) { var touch = e.touches[0]; moveY = touch.pageY - startY; index = Number(e.target.id.split('page')[1]) //下一页 if(moveY < 0) { if(index == 3) { return false; } content.style.webkitTransform = 'translateY(-'+(itemHeight*index)+'px)' } //上一页 else if(moveY > 0) { if(index == 1) { return false; } content.style.webkitTransform = 'translateY('+(itemHeight+endY)+'px)' } } content.addEventListener('touchstart', boxTouchStart, false ) content.addEventListener('touchmove', boxTouchMove, false) content.addEventListener('touchend', boxTouchEnd, false) </script> </body> </html>
ps: 水平位置同理，将Y换成X即可
注意：一定要把开发模式切成移动端，PC模式是不能触摸滑动。
2.今天补充第二种滑动效果，这种属于重叠的滑动效果，楼主做微信H5的移动端活动页面，该死的android，由于有input框，使用translateY()这种操作，
软键盘弹出后，会出现白屏，所以做了修改；
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>触摸滑屏</title> <style> html,body,h2 { margin: 0; padding: 0; } html,body,#wraper,#content { width: 100%; height: 100%; } #wraper { overflow: hidden; } #content { transition: all 1s linear; } .page { width: 100%; height: 0; overflow: hidden; transition: all 1s linear; color: #ff0 } #page1 { height: 100%; background: #f00 } #page2 { background: #0f0 } #page3 { background: #00f } /* img { width: auto; height: auto; } */ </style> </head> <body> <div id="wraper"> <div id="content"> <div class="page" id="page1"> page1 <img src="https://dimg04.c-ctrip.com/images/300p0f0000007eqxf6DAD_C_228_132.jpg" alt="" /> </div> <div class="page" id="page2"> <img src="https://dimg06.c-ctrip.com/images/350d0p000000fekw944EE_R_228_132_Q90.jpg" alt="" /> page2 </div> <div class="page" id="page3"> <img src="https://dimg04.c-ctrip.com/images/300v0o000000fftlb25BA_C_228_132.jpg" alt="" /> page3 <button class="back">back</button> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script> var page1 = document.getElementById('page1'), //滑动item page2 = document.getElementById('page2'), page3 = document.getElementById('page3'), wraper = document.getElementById('wraper'), content = document.getElementById('content'); //滑动容器 var itemHeight = wraper.offsetHeight; //滑动item高度 var index = 0; //滑动计数 var moveY, //滑动距离 endY, //滑动停止的Y坐标 startY; //滑动开始的Y坐标 // content.style.height = (itemHeight * 3) + 'px' // 触摸开始 function boxTouchStart(e) { var touch = e.touches[0]; startY = touch.pageY; } // 触摸移动 function boxTouchMove(e) { var touch = e.touches[0]; moveY = touch.pageY - startY; index = Number(e.target.id.split('page')[1]) //下一页 if(moveY < 0) { if(index == 3) { return false; } $('#page'+index).css('height', '0px') $('#page'+(index+1)).css('height', itemHeight+'px') } } $('.back').click(function() { $('#page3').css('height', '0px') $('#page1').css('height', itemHeight+'px') }) content.addEventListener('touchstart', boxTouchStart, false ) content.addEventListener('touchmove', boxTouchMove, false) </script> </body> </html>
