<!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即可
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>