ホームページ > 記事 > ウェブフロントエンド > JSでモバイル端末に全画面スライドを実装する方法
この記事では、サンプル コードを使用して、js に基づいてモバイル デバイスに全画面スライド エフェクトを実装する方法を共有します。基本的な考え方は、指のスライド方向を検出し、指を離したときの位置を取得し、減算することです。指が押されたときの位置。正しい結果は下にスライドします。この記事では、JS を使用してモバイル端末で全画面スライドを実現するサンプル コードを紹介します。
基本的なアイデア:
1) 指のスライド方向を検出します。指が持ち上げられたときの位置を取得し、指が押されたときの位置を減算します。正しい結果は下にスライドすることです
2) 指を持ち上げます指 最後に、現在のページの位置を対応する逆の操作に変更します
具体的なコードは次のとおりです:
html
<p id="wrap"> <p id="page01" class="pages">第一屏</p> <p id="page02" class="pages">第二屏</p> <p id="page03" class="pages">第三屏</p> <p id="page04" class="pages">第四屏</p> </p> <p id="dots"> <span class="now"></span><span class=""></span><span class=""></span><span class=""></span> </p>
css
*{ margin:0; padding:0; } body{ overflow: hidden; } #wrap > p{ width: 10rem; position: absolute; left: 0; top: 0; background: #fff; transition: all 0.3s ease; } #dots{ position: fixed; right: 5px; top: 40%; z-index: 9; } #dots span{ display: block; height: 0.2rem; width: 0.2rem; border: 1px solid #000; border-radius: 50%; margin-bottom: 3px; } #dots .now{ background: #555; }
jsは2つの部分に分かれています
まず、フォントを設定します設定できるHTMLタグのサイズ remのベース(ページの先頭に配置)
document.getElementsByTagName("html")[0].style.fontSize = window.innerWidth/10 + "px";
次に、特定のスライド操作コード
window.onload = function(){ var op = document.getElementById("wrap"); var aPages = op.getElementsByClassName("pages"); var aDots = document.getElementById("dots").getElementsByTagName("span"); var winH = window.innerHeight; var tTime = 1; //设置每页的高度和zindex值 for(var i=0; i<aPages.length; i++){ aPages[i].style.height = winH + "px"; aPages[i].style.zIndex = 1; } aPages[0].style.zIndex = 3; aPages[1].style.zIndex = 2; op.style.height = winH + "px"; //手指拖动事件(去除默认动作) document.addEventListener("touchmove",function(e){ e.preventDefault(); }); var YStart = 0; var iNow = 0; //手指按下 op.addEventListener("touchstart",function(e){ YStart = e.changedTouches[0].clientY; }); //手指移动 op.addEventListener("touchmove",function(e){ disY = e.changedTouches[0].clientY-YStart; //向下滑正,向上滑负 }); //手指离开 op.addEventListener("touchend",function(e){ disY = e.changedTouches[0].clientY-YStart; //向下滑正,向上滑负 if(Math.abs(disY)>winH/20){ //只有当滑动距离大于了一定值得时候,才执行切换 if(disY<0){ iNow++; if(iNow>=aDots.length){ iNow = 0; } aPages[0].style.transform = "translateY("+ -winH +"px)"; doSlide(); }else{ iNow--; if(iNow<0){ iNow = aDots.length-1; } aPages[0].style.transform = "translateY("+ winH +"px)"; doSlide("up"); } } }); function doSlide(upflag){ for(var i=0;i<aDots.length;i++){ aDots[i].className = ""; } aDots[iNow].className = "now"; if(upflag){ //向上滑 aPages[3].style.zIndex = 2; aPages[1].style.zIndex = 1; op.insertBefore(aPages[3],aPages[1]); setTimeout(function(){ aPages[1].style.transform = "translateY(0px)"; aPages[1].style.zIndex = 2; aPages[0].style.zIndex = 3; },300) }else{ setTimeout(function(){ aPages[0].style.transform = "translateY(0px)"; aPages[0].style.zIndex = 1; aPages[1].style.zIndex = 3; aPages[2].style.zIndex = 2; op.appendChild(aPages[0]); },300) } } }
それでは、簡単なコードを共有しましょう。モバイル端末上でページ全体のスライド画面表示を実現するJSの具体的なコードは以下の通りです 表示:
<!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>移动端整页滑屏示例</title> <style type="text/css"> * { padding: 0; margin: 0; font-family: Verdana; } body, html { height: 100%; background-color: #000000; } .wrap { width: 100%; height: 100%; overflow: hidden; } .wrap2 { width: 100%; height: 1000%; transition: 0.3s linear } .page { width: 100%; height: 10% } .page { background-color: #fdfdfd; font-size: 100px; line-height: 400px; text-align: center; font-weight: bold; } </style> </head> <body> <p class="wrap" id="wrap"> <p class="wrap2" id="wrap2"> <p class="page">1</p> <p class="page" style="background-color:#dddddd;">2</p> <p class="page">3</p> <p class="page" style="background-color:#dddddd;">4</p> <p class="page">5</p> <p class="page" style="background-color:#dddddd;">6</p> </p> </p> <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: 6, //一共有几页 n: 0 //页面一打开默认在第几页?第一页就是0,第二页就是1 }); </script> </body> </html>
関連おすすめ:
JSの下部にあるニューススライド効果実装コード(Vankeを模倣)
以上がJSでモバイル端末に全画面スライドを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。