この記事では、サンプル コードを使用して、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 サイトの他の関連記事を参照してください。
JavaScriptとWeb：コア機能とユースケースApr 18, 2025 am 12:19 AMWeb開発におけるJavaScriptの主な用途には、クライアントの相互作用、フォーム検証、非同期通信が含まれます。 1）DOM操作による動的なコンテンツの更新とユーザーインタラクション。 2）ユーザーエクスペリエンスを改善するためにデータを提出する前に、クライアントの検証が実行されます。 3）サーバーとのリフレッシュレス通信は、AJAXテクノロジーを通じて達成されます。
JavaScriptエンジンの理解：実装の詳細Apr 17, 2025 am 12:05 AMJavaScriptエンジンが内部的にどのように機能するかを理解することは、開発者にとってより効率的なコードの作成とパフォーマンスのボトルネックと最適化戦略の理解に役立つためです。 1）エンジンのワークフローには、3つの段階が含まれます。解析、コンパイル、実行。 2）実行プロセス中、エンジンはインラインキャッシュや非表示クラスなどの動的最適化を実行します。 3）ベストプラクティスには、グローバル変数の避け、ループの最適化、constとletsの使用、閉鎖の過度の使用の回避が含まれます。
Python vs. JavaScript：学習曲線と使いやすさApr 16, 2025 am 12:12 AMPythonは、スムーズな学習曲線と簡潔な構文を備えた初心者により適しています。 JavaScriptは、急な学習曲線と柔軟な構文を備えたフロントエンド開発に適しています。 1。Python構文は直感的で、データサイエンスやバックエンド開発に適しています。 2。JavaScriptは柔軟で、フロントエンドおよびサーバー側のプログラミングで広く使用されています。
Python vs. JavaScript：コミュニティ、ライブラリ、リソースApr 15, 2025 am 12:16 AMPythonとJavaScriptには、コミュニティ、ライブラリ、リソースの観点から、独自の利点と短所があります。 1）Pythonコミュニティはフレンドリーで初心者に適していますが、フロントエンドの開発リソースはJavaScriptほど豊富ではありません。 2）Pythonはデータサイエンスおよび機械学習ライブラリで強力ですが、JavaScriptはフロントエンド開発ライブラリとフレームワークで優れています。 3）どちらも豊富な学習リソースを持っていますが、Pythonは公式文書から始めるのに適していますが、JavaScriptはMDNWebDocsにより優れています。選択は、プロジェクトのニーズと個人的な関心に基づいている必要があります。
C/CからJavaScriptへ：すべてがどのように機能するかApr 14, 2025 am 12:05 AMC/CからJavaScriptへのシフトには、動的なタイピング、ゴミ収集、非同期プログラミングへの適応が必要です。 1）C/Cは、手動メモリ管理を必要とする静的に型付けられた言語であり、JavaScriptは動的に型付けされ、ごみ収集が自動的に処理されます。 2）C/Cはマシンコードにコンパイルする必要がありますが、JavaScriptは解釈言語です。 3）JavaScriptは、閉鎖、プロトタイプチェーン、約束などの概念を導入します。これにより、柔軟性と非同期プログラミング機能が向上します。
JavaScriptエンジン：実装の比較Apr 13, 2025 am 12:05 AMさまざまなJavaScriptエンジンは、各エンジンの実装原則と最適化戦略が異なるため、JavaScriptコードを解析および実行するときに異なる効果をもたらします。 1。語彙分析：ソースコードを語彙ユニットに変換します。 2。文法分析：抽象的な構文ツリーを生成します。 3。最適化とコンパイル：JITコンパイラを介してマシンコードを生成します。 4。実行：マシンコードを実行します。 V8エンジンはインスタントコンピレーションと非表示クラスを通じて最適化され、Spidermonkeyはタイプ推論システムを使用して、同じコードで異なるパフォーマンスパフォーマンスをもたらします。
ブラウザを超えて：現実世界のJavaScriptApr 12, 2025 am 12:06 AM現実世界におけるJavaScriptのアプリケーションには、サーバー側のプログラミング、モバイルアプリケーション開発、モノのインターネット制御が含まれます。 2。モバイルアプリケーションの開発は、ReactNativeを通じて実行され、クロスプラットフォームの展開をサポートします。 3.ハードウェアの相互作用に適したJohnny-Fiveライブラリを介したIoTデバイス制御に使用されます。
next.jsを使用してマルチテナントSaaSアプリケーションを構築する（バックエンド統合）Apr 11, 2025 am 08:23 AM私はあなたの日常的な技術ツールを使用して機能的なマルチテナントSaaSアプリケーション（EDTECHアプリ）を作成しましたが、あなたは同じことをすることができます。 まず、マルチテナントSaaSアプリケーションとは何ですか？ マルチテナントSaaSアプリケーションを使用すると、Singの複数の顧客にサービスを提供できます
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
MinGW - Minimalist GNU for Windows
このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポート ライブラリとヘッダー ファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。
DVWA
Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、
SecLists
SecLists は、セキュリティ テスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティ テスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティ テストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジング ペイロード、機密データ パターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテスト マシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
メモ帳++7.3.1
使いやすく無料のコードエディター
