JSはモバイル端末の画面を1つずつ上下にスライドさせる機能を実装します
|
この記事では、モバイル端末を一度に1画面ずつ上下にスライドさせるためのJSの具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。 機能は次のとおりです。
上記のコード:
<!DOCTYPE html>
<html lang="ja">
<ヘッド>
<メタ文字セット="UTF-8">
<meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
<title>ドキュメント</title>
<スタイル>
* {
マージン: 0;
パディング: 0;
-moz-user-select: なし;
/* ファイアフォックス */
-webkit-user-select: なし;
/*Webkit ブラウザ*/
-ms-user-select: なし;
/*IE10*/
-khtml-ユーザー選択: なし;
/* 初期のブラウザ */
ユーザー選択: なし;
}
＃箱 {
幅: 350ピクセル;
高さ: 500px;
マージン: 30px 自動;
境界線の半径: 5px;
ボックスの影: 0px 0px 27px -3px 赤;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-境界線の半径: 5px;
オーバーフロー: 非表示;
位置: 相対的;
背景色: #ccc;
}
.childbox {
幅: 300%;
高さ: 100%;
ディスプレイ: フレックス;
位置: 絶対;
上: 0;
左: 0;
}
.childbox>div {
フレックス: 1;
高さ: 100%;
}
.child1 {
背景色: サーモン色;
}
.child2 {
背景色: 緑黄色;
}
.child3 {
背景色: 青紫;
}
.nav_box {
位置: 絶対;
幅: 100%;
テキスト配置: 中央;
行の高さ: 50px;
}
.nav_box div {
表示: インラインブロック;
色: #fff;
マージン: 0 5px;
位置: 相対的;
}
.active_nav::before {
コンテンツ： '';
位置: 絶対;
背景色: #fff;
左: 2px;
下: 7px;
幅: 27px;
高さ: 2px;
}
.childbox>div {
位置: 相対的;
}
.childbox>div .listview {
幅: 100%;
位置: 絶対;
}
.view_child {
テキスト配置: 中央;
行の高さ: 200px;
色: #fff;
フォントサイズ: 25px;
}
</スタイル>
</head>
<本文>
<div id="ボックス">
<div class="childbox">
<div class="child1">
<div class="listview" type="near">
</div>
</div>
<div class="child2">
<div class="listview" type="フォロー">
</div>
</div>
<div class="child3">
<div class="listview" type="recommend">
</div>
</div>
</div>
<div class="nav_box">
<div>近く</div>
<div>フォロー</div>
<div class="active_nav">推奨事項</div>
</div>
</div>
</本文>
<スクリプト>
//アニメーションボックスを取得します。let childbox = document.querySelector('.childbox')
//画面の高さを取得する let viewheight = document.querySelector('#box').offsetHeight
//すべてのナビゲーションを取得します。let childnav = document.querySelector('.nav_box').querySelectorAll('div')
//ビデオタイプボックスを取得します。let viewlist = document.querySelectorAll('.listview')
//ナビゲーションインデックス（0、近く、1、注目、2、推奨）
インデックスタイプ = 2
//動画再生のインデックス（0: 近く、1: フォロー、2: おすすめ）[下付き文字、動画数、ページ番号]
view_index = {とする
0: [0, 0, 1],
1: [0, 0, 1],
2: [0, 0, 1]
}
//ナビゲーションを初期化する set_nav_active(indextype)
//ナビゲーション選択状態関数set_nav_active(index) {
// 選択状態をクリアする for (let i = 0; i < childnav.length; i++) {
childnav[i].className = ''
}
//選択した子に値を追加しますnav[index].className = 'active_nav'
//ボックスの位置を変更する childbox.style.left = index * -100 + '%'
}
//ナビゲーションにクリックイベントを追加します for (let i = 0; i < childnav.length; i++) {
childnav[i].onclick = 関数 () {
// 遷移アニメーションを追加 childbox.style.transition = 'all 0.5s'
//クリックナビゲーションステータスを変更する indextype = i
set_nav_active(インデックスタイプ)
}
}
// 左右にスライド let box = document.querySelector('#box')
//アニメーションが終了したかどうか let transition_status = true
//押す box.onmousedown = function (event) {
//アニメーションが実行可能かどうかを判定します if (!transition_status) {
戻る
}
//座標値を取得する let startY = event.clientY
startX = event.clientX とします。
//判定に進むかどうか let t_l_type = true
//上下または左右のスライドの状態を取得します (0: 移動なし、1: 左右、2: 上下)
move_type = 0 とします
//アニメーションの動作を記録します (1: プルダウン、2: 上下、3: 左右、0: 動きなし)
transition_type = 0 とします
// 左と右の開始
// クリアボックスアニメーション childbox.style.transition = ''
//ボックスの左の位置を取得します。let startleft = childbox.offsetLeft
//スライドを切り替えるかどうかlet type = {
a: 誤り、
b: ''
}
//左と右の上
// 上下にスライド // スライドの初期化位置 let startTop = viewlist[indextype].offsetTop
//切り替えるかどうかを判断するlet top_type_view = {
a: false, // 切り替えるかどうか b: '', // 上または下に切り替えるかどうかを判断}
console.log(開始トップ)
//上下
// 下に引いて更新 // アニメーションをクリア viewlist[indextype].style.transition = '';
//プルダウン距離を記録する let b_top = 0
//下に引っ張る
document.onmousemove = 関数 (イベント) {
//移動時の座標を取得する let moveY = event.clientY
moveX = event.clientX とします。
//スイッチを追加するかどうかを決定するスイッチを追加します if (t_l_type) {
// 左か右か上か下にスライドするかを判断する if (Math.abs(moveY - startY) > 5) {
//次の判定を停止 t_l_type = false
// スライディングステータスを記録 move_type = 2
}
(Math.abs(moveX - startX) > 5) の場合 {
//次の判定を停止 t_l_type = false
// スライディングステータスを記録 move_type = 1
}
}
//スライドコードを判断する if (move_type == 2) {
// プルダウンには 2 つの条件が必要です 1. プルダウンに何もないこと 2 if (view_index[indextype][0] == 0 && moveY - startY > 0) {
console.log('プルダウン')
//アニメーション状態の変更 transition_type = 1
//プルダウン距離を計算する b_top = moveY - startY
// ビューボックスをプルします viewlist[indextype].style.top = b_top + 'px'
戻る
}
// 上下スライドを実行する // 下に引っ張ったときに上下スライドを拒否する if (transition_type != 1) {
//アニメーション状態の変更 transition_type = 2
// 位置の移動 let moveY = event.clientY
//上下に移動する距離を計算します。let num = moveY - startY
//ドラッグ要素の上の値を変更する viewlist[indextype].style.top = startTop + num + 'px'
//切り替えるかどうかを判断する if (num > 70) {
top_type_view.a = 真
top_type_view.b = 'トップ'
} そうでなければ (数値 < -70) {
top_type_view.a = 真
top_type_view.b = '下'
}
}
} そうでない場合 (move_type == 1) {
// 左と右のコード // アニメーション状態の変更 transition_type = 3
// 位置の移動 let moveX = event.clientX
//移動距離 let num = moveX - startX
//ボックスに必要な左の値 childbox.style.left = startleft + num + 'px'
//スライド方向 if (moveX > startX) {
（数値＞100）の場合{
タイプ.a = true
type.b = '右'
}
} そうでなければ（移動X < 開始X）{
（数値<-100）の場合{
タイプ.a = true
type.b = '左'
}
}
// 以上
}
}
// 上げる window.onmouseup = function () {
//スライドイベントをクリア document.onmousemove = ''
//実行アニメーションを判断する if (transition_type == 1) {
//プルダウン//アニメーションを追加 viewlist[indextype].style.transition = 'all .5s';
// プルの距離を判断してリフレッシュするかどうかを決定します if (b_top > 70) {
//アニメーションを実行する transition_status = false
ビューリスト[インデックスタイプ].style.top = '70px'
setTimeout(関数() {
ビューリスト[インデックスタイプ].style.top = '0px'
//最初のページから開始 view_index[indextype][2] = 1
自動表示(インデックスタイプ)
//アニメーションを復元する setTimeout(() => {
遷移ステータス = true
}, 500);
}, 2000)
} それ以外 {
ビューリスト[インデックスタイプ].style.top = '0px'
}
} それ以外の場合 (transition_type == 2) {
// 上下 // 遷移アニメーションを追加 viewlist[indextype].style.transition = 'all .5s';
//実行するアニメーションを判断する if (top_type_view.a) {
//上下の切り替えを判断する if (top_type_view.b == 'up') {
// 下付き文字の変更 view_index[indextype][0] --
(view_index[インデックスタイプ][0] <= -1) の場合 {
view_index[インデックスタイプ][0] = 0
}
viewlist[インデックスタイプ].style.top = view_index[インデックスタイプ][0] * -viewheight + 'px'
コンソールログ('アップ')
} そうでない場合 (top_type_view.b == 'down') {
view_index[インデックスタイプ][0]++
(view_index[インデックスタイプ][0] >= view_index[インデックスタイプ][1] - 2) の場合 {
//新しいビデオを生成する autoview(indextype)
}
viewlist[インデックスタイプ].style.top = view_index[インデックスタイプ][0] * -viewheight + 'px'
}
} それ以外 {
//既存の状態を復元する viewlist[indextype].style.top = startTop + 'px'
}
} それ以外の場合 (transition_type == 3) {
//左と右 //切り替えるかどうかを決定するために実行します if (type.a) {
type.b === '左'の場合{
インデックスタイプ++
インデックスタイプ >= 3 の場合 {
インデックスタイプ = 2
}
} そうでない場合 (type.b === 'right') {
インデックスタイプ--
（インデックスタイプ <= -1）の場合{
インデックスタイプ = 0
}
}
}
// トランジションを追加 childbox.style.transition = 'all 0.5s'
// 切り替え関数 set_nav_active(indextype) を呼び出す
}
//次の判定を復元する t_l_type = true
//次の状態を復元 move_type = 0
//アニメーション状態を復元 transition_type = 0
}
}
//ランダムな背景色関数 autocolor() {
`rgb(${Math.floor(Math.random() * 255)},${Math.floor(Math.random() * 255)},${Math.floor(Math.random() * 255)})` を返します
}
//デフォルトでビデオリストを生成します for (let i = 0; i < viewlist.length; i++) {
オートビュー(i)
}
//ビデオリストを生成する function autoview(index) {
//ビデオタイプを取得します。let type = viewlist[index].getAttribute('type')
//動画の数を変更する if (view_index[index][2] == 1) {
// 既存のコンテンツをクリア viewlist[indextype].innerHTML = ''
//録画ビデオ数 view_index[index][1] = 10
} それ以外 {
//動画の数を累積する view_index[index][1] += 10
}
// インデックス挿入された添え字 for (let i = 0; i < 10; i++) {
//DOM を作成
div = document.createElement('div') とします。
//名前 div.className = 'view_child'
//コンテンツ div.innerHTML = `
<div>${type}:${(view_index[index][2] - 1) * 10 + i + 1}</div>
<時間></時間>
<div>ページ番号: ${view_index[index][2]}</div>
`
//背景色を設定する div.style.backgroundColor = autocolor()
//ボックスの高さを設定する div.style.height = viewheight + 'px'
//viewlist[index].appendChild(div) を追加します
}
//次のページ番号を変更する view_index[index][2]++
コンソール.log(ビューインデックス)
}
//ダブルクリックすると上部に固定されます let nav_box = document.querySelector('.nav_box')
nav_box.ondblclick = 関数 () {
viewlist[indextype].style.transition = 'すべて .5'
ビューリスト[インデックスタイプ].style.top = '0px'
view_index[インデックスタイプ][0] = 0
}
</スクリプト>
</html>以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: MySQL ストレージ エンジン MyISAM と InnoDB の違いの概要
>>: Docker で Java 8 Spring Boot アプリケーションを開発する方法
推薦する
HTML における要素の水平および垂直中央揃えに関する議論
ページをデザインするときには、ログイン ウィンドウを中央に配置するなど、DIV を中央に配置し、ペー...
MySQL 5.7.17 無料インストールバージョンの設定方法グラフィックチュートリアル (Windows10)
1. 概要ネットでいろいろ検索してみたところ、Linux システム向けではなく、現在の新しいバージ...
MySQL の完全バックアップ中に特定のライブラリを除外する方法
MySQLの完全バックアップを実行するときは、--all-databaseパラメータを使用します。例...
Ember.js と Vue.js の詳細な比較
目次概要フレームワークを選択する理由は何ですか? js のエンバーEmber.js と Vue.js...
ブルートフォース攻撃を防ぐためのシェルスクリプト設定
シェルスクリプトはアクセス制御を設定し、複数回のログイン失敗後にIPをブロックしてSSHのブルートフ...
Linux で毎日データベースの自動バックアップを設定する方法
この記事では、Centos7.6 システムと Oracle11g を例に挙げます。 1. まずデータ...
Vue el-date-picker 動的制限時間範囲ケースの詳細な説明
2つの状況がある1. 開始時間と終了時間が同じボックス内にあります（今月のみ限定） 2. 開始時間と...
MySQLに画像を保存する方法
1 はじめにデータベースを設計する場合、画像や音声ファイルをデータベースに挿入することは避けられませ...
画像ソーシャルネットワーキングサイトのUIアプリケーションの比較分析（図）
私たちの生活、仕事、勉強において、ソーシャル ネットワークは徐々に将来のインターネット発展のトレンド...
格納可能なセカンダリメニューを実装するための JavaScript
JavaScriptで格納可能なセカンダリメニューを実装するための具体的なコードは参考までに。具体...
JavaScript データ構造 双方向リンクリスト
単方向リンク リストは、先頭から末尾、または末尾から先頭への方向のみを走査できます。そのため、単方向...
MySQL インデックス最適化の説明
日常業務では、実行に時間のかかる SQL ステートメントを記録するために、スロー クエリを実行するこ...
CenOS6.7 mysql 8.0.22 のインストールと設定方法のグラフィックチュートリアル
CenOS6.7 は MySQL8.0.22 (推奨コレクション) をインストールします1. MyS...
UbuntuへのDocker CEのインストール
この記事は、Ubuntu 17.10 での Docker CE のインストールを記録するために使用さ...
将来人気が出るであろういくつかのナビゲーション方向
<br />今は情報爆発の時代であるだけでなく、サービス爆発の時代でもあります。それはす...