クールなページング効果を実現するネイティブJS
|
この記事では、次のような効果を持つ JS ページング効果の例を紹介します。クールだと思いませんか?
コードの実装は次のとおりです。
<!DOCTYPE html>
<html>
<ヘッド>
<meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=utf-8" />
<title>クールなページングを実現するネイティブ JS</title>
<スタイル>
* {
マージン: 0;
パディング: 0;
}
li {
リストスタイル: なし;
}
#ul1 {
幅: 600ピクセル;
高さ: 250px;
}
#ul1 li {
幅: 100ピクセル;
高さ: 100px;
背景: 赤;
フロート: 左;
オーバーフロー: 非表示;
マージン: 10px;
}
{
マージン: 5px;
}
</スタイル>
<!-- モーション機能を導入 -->
<script type="text/javascript" src="js/move.js"></script>
<スクリプト>
window.onload = 関数（）{
var json = {
タイトル：
「効果1」、
「効果2」、
「効果3」、
「効果4」、
「効果5」、
「効果6」、
「効果7」、
「効果8」、
「効果9」、
「効果10」、
「効果11」、
「効果12」、
「効果13」、
「効果14」、
「効果15」、
「効果16」、
「効果17」、
「効果18」、
「効果19」、
「効果20」、
「効果21」、
「効果22」、
「効果23」、
「効果24」、
「効果25」、
「効果26」、
「効果27」、
「効果28」、
「効果29」、
「効果30」、
「効果31」、
「効果32」、
「効果33」、
「エフェクト34」
]
};
//レイアウト座標を格納する配列を作成します。var arr = [];
//最後の li から移動を開始します。添え字は 9 です。
var iNow = 9;
ページ（{
id: 'div1',
現在数: 1,
//ページ数の合計を計算し、10で割って切り上げます allNum: Math.ceil(json.title.length / 10),
callBack: 関数 (now, all) {
// 現在のページを 10 倍した値が json.title.length より小さい場合は、10 項目を読み込みます。 // 現在のページを 10 倍した値が json.title.length より大きい場合は、この例の残りの 4 項目を読み込みます。 var num = now * 10 < json.title.length ? 10 : json.title.length - (now - 1) * 10;
//ulを取得
var oUl = document.getElementById('ul1');
//liを取得
var aLi = oUl.getElementsByTagName('li');
//前のulの内容が空の場合 if (oUl.innerHTML == '') {
//num 回ループします for (var i = 0; i < num; i++) {
//liを作成
var oLi = document.createElement('li');
//li の内容を設定します。now が 0 の場合、[(now-1)*10 + i] は 1 番目の内容を割り当てます。//li の内容を設定します。now が 1 の場合、[(now-1)*10 + i] は 11 番目の内容を割り当てます。oLi.innerHTML = json.title[(now - 1) * 10 + i];
// li を ul に追加 oUl.appendChild(oLi);
}
//ループする for (var i = 0; i < aLi.length; i++) {
//各liの左と上の値をarrにプッシュします。 arr.push([aLi[i].offsetLeft, aLi[i].offsetTop]);
}
//ループする for (var i = 0; i < aLi.length; i++) {
//各liの位置を絶対位置に変更します。aLi[i].style.position = 'absolute';
//左の値を再割り当てします aLi[i].style.left = arr[i][0] + 'px';
//上部の値を再割り当てします aLi[i].style.top = arr[i][1] + 'px';
//位置決めに影響するマージン値を0にリセットします
aLi[i].style.margin = 0;
}
} それ以外 {
//各エフェクトのアニメーションを順番に実行するためのタイマーを設定します var timer = setInterval(function () {
//move.js の strartMove 関数を実行し、下付き文字 iNow の li から開始して、left/top/opacity の値を変更します。startMove(aLi[iNow], { left: 200, top: 250, opacity: 0 });
// 移動しているliが最後のliの場合 if (iNow == 0) {
//タイマーをクリアする clearInterval(timer);
//iNow の添え字の値は、現在ロードされているアイテムの数から 1 を引いた値です。この例では、10 個のアイテムがロードされている場合は 9、4 個のアイテムがロードされている場合は 3 です。
iNow = 数値 - 1;
//タブをクリックすると、表示される内容を変更します for (var i = 0; i < num; i++) {
aLi[i].innerHTML = json.title[(now - 1) * 10 + i];
}
//ポップアップタイマーを設定する var timer2 = setInterval(function () {
//move.js の strartMove 関数を、インデックス iNow の li から実行します。//各 li の属性値を、最初の移動の前に保存された値に復元します。startMove(aLi[iNow], { left: arr[iNow][0], top: arr[iNow][1], opacity: 100 });
// 移動しているliが最後のliの場合 if (iNow == 0) {
//タイマーをクリアする clearInterval(timer2);
//iNow の添え字の値は、現在ロードされているアイテムの数から 1 を引いた値です。この例では、10 個のアイテムがロードされている場合は 9、4 個のアイテムがロードされている場合は 3 です。
iNow = 数値 - 1;
} それ以外 {
//iNow が減少し、iNow-- が順に実行されます。
}
}, 100);
} それ以外 {
//iNow が減少し、iNow-- が順に実行されます。
}
}, 100);
}
}
});
};
関数ページ(opt) {
opt.id の場合、 false を返します。
var obj = document.getElementById(opt.id);
var nowNum = opt.nowNum || 1;
var allNum = opt.allNum || 5;
var callBack = opt.callBack || 関数 () { };
(nowNum >= 4 && allNum >= 6) の場合 {
var oA = document.createElement('a');
oA.href = '#1';
oA.innerHTML = 'ホームページ';
obj.appendChild(oA);
}
(nowNum >= 2)の場合{
var oA = document.createElement('a');
oA.href = '#' + (nowNum - 1);
oA.innerHTML = '前のページ';
obj.appendChild(oA);
}
(allNum <= 5)の場合{
(var i = 1; i <= allNum; i++) の場合 {
var oA = document.createElement('a');
oA.href = '#' + i;
(nowNum == i)の場合{
oA.innerHTML = i;
} それ以外 {
oA.innerHTML = '[' + i + ']';
}
obj.appendChild(oA);
}
} それ以外 {
(var i = 1; i <= 5; i++) の場合 {
var oA = document.createElement('a');
(nowNum == 1 || nowNum == 2) の場合 {
oA.href = '#' + i;
(nowNum == i)の場合{
oA.innerHTML = i;
} それ以外 {
oA.innerHTML = '[' + i + ']';
}
} そうでない場合 ((allNum - nowNum) == 0 || (allNum - nowNum) == 1) {
oA.href = '#' + (allNum - 5 + i);
((allNum - nowNum) == 0 && i == 5) の場合 {
oA.innerHTML = (allNum - 5 + i);
} そうでない場合 ((allNum - nowNum) == 1 && i == 4) {
oA.innerHTML = (allNum - 5 + i);
} それ以外 {
oA.innerHTML = '[' + (allNum - 5 + i) + ']';
}
} それ以外 {
oA.href = '#' + (nowNum - 3 + i);
もし (i == 3) {
oA.innerHTML = (nowNum - 3 + i);
} それ以外 {
oA.innerHTML = '[' + (nowNum - 3 + i) + ']';
}
}
obj.appendChild(oA);
}
}
((allNum - nowNum) >= 1) の場合 {
var oA = document.createElement('a');
oA.href = '#' + (nowNum + 1);
oA.innerHTML = '次のページ';
obj.appendChild(oA);
}
((allNum - nowNum) >= 3 && allNum >= 6) の場合 {
var oA = document.createElement('a');
oA.href = '#' + allNum;
oA.innerHTML = '最後のページ';
obj.appendChild(oA);
}
コールバック(nowNum、allNum);
var aA = obj.getElementsByTagName('a');
(var i = 0; i < aA.length; i++) の場合 {
aA[i].onclick = 関数（）{
var nowNum = parseInt(this.getAttribute('href').substring(1));
obj.innerHTML = '';
ページ（{
id: opt.id,
現在番号: 現在番号、
全数値: 全数値、
コールバック: コールバック
});
false を返します。
};
}
}
</スクリプト>
</head>
<本文>
<ul id="ul1"></ul>
<div id="div1"></div>
</本文>
</html>導入されたモーション機能コード:
関数 startMove(obj, json, endFn) {
タイマー間隔をクリアします。
obj.timer = setInterval(関数() {
var bBtn = true;
for (var attr in json) {
var iCur = 0;
属性 == '不透明度' の場合 {
(Math.round(parseFloat(getStyle(obj, attr)) * 100) == 0) の場合 {
iCur = Math.round(parseFloat(getStyle(obj, attr)) * 100);
} それ以外 {
iCur = Math.round(parseFloat(getStyle(obj, attr)) * 100) || 100;
}
} それ以外 {
iCur = parseInt(getStyle(obj, attr)) || 0;
}
var iSpeed = (json[attr] - iCur) / 3;
iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
iCur != json[attr] の場合 {
bBtn = 偽;
}
属性 == '不透明度' の場合 {
obj.style.filter = 'alpha(opacity=' + (iCur + iSpeed) + ')';
obj.style.opacity = (iCur + iSpeed) / 100;
} それ以外 {
obj.style[attr] = iCur + iSpeed + 'px';
}
}
もし（bBtn）{
タイマー間隔をクリアします。
if (endFn) {
endFn.call(obj);
}
}
}, 30);
}
関数 getStyle(obj, attr) {
（obj.currentStyle）の場合{
obj.currentStyle[attr]を返します。
}
それ以外 {
getComputedStyle(obj, false)[attr]を返します。
}
}以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: MySQL の sql_mode モード例の詳細な説明
推薦する
jsは水平および垂直スライダーを実現します
最近、練習プロジェクトをしていたときにスライダーを使う必要があったので、調べてみました。まず、水平ス...
Vue3 スロットの使用状況の概要
目次1. Vスロットの紹介2. 匿名スロット3. 名前付きスロット4. スコープ付きスロット5. 動...
優れた登録プロセスの手順
ウェブサイトにとって、これは最も基本的な機能です。それでは、登録プロセスに含まれる手順を見てみましょ...
Reactにおける不変値の説明
目次不変の値とは何ですか?不変の値を使用するのはなぜですか? Reactのパフォーマンス最適化は不変...
Dockerを使用してサーバー上で複数のPHPバージョンを実行する
PHP7 がリリースされてからかなり時間が経ちますが、パフォーマンスが大幅に向上したことはよく知られ...
JSは賞金の重さに基づいて当選確率を計算します
目次1. シナリオ例1.1. 抽選の賞品名を設定する1.2. 各賞の重みを設定する1.3. ラッキー...
JSを段階的に学ぶ方法についての簡単な説明
目次概要1. jsの位置づけを明確に理解する2. 明確な学習パス3. 自己規律と粘り強さ4. 練習し...
CentOS7仮想マシンがインターネットにアクセスできない問題を解決し、CentOS7仮想マシンが静的IPを使用してインターネットにアクセスするように設定します。
最近、VMware 仮想マシンで CentOS を試していたのですが、インストール後にインターネット...
Telnet は Alpine イメージの busybox-extras に移動されました
Alpine イメージの telnet はバージョン 3.7 以降、busybox-extras パ...
Linux で Xfce デスクトップ環境を使用すべき 8 つの理由
いくつかの理由（好奇心も含む）から、数週間前に Linux デスクトップとして Xfce を使い始め...
MySQL でよく使われる型変換関数の概要 (推奨)
1. Concat関数。よく使用される接続文字列: concat 関数。たとえば、SQLクエリ条件...
ウェブサイトのパフォーマンス: 画像とCookieの最適化、モバイルアプリケーションの最適化
前のセクションでは、コンテンツ、サーバー、JavaScript、CSS など、Web サイトのパフォ...
CSS3 は本当に SCSS に取って代わるのでしょうか?
Web ページのスタイル設定に関しては、プロジェクトで純粋な CSS または SCSS (および他...
WEB2.0の片手ルール
<br />前回のCSSに関する記事は、多くの人にあまり理解されませんでした。そのため、...
Vue を使用してパブリック アカウントの Web ページを開発する方法
目次プロジェクトの背景始めるvue-cliでプロジェクトを作成するモバイル適応についてnormali...