クールなページング効果を実現するネイティブ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 モード例の詳細な説明
推薦する
ubuntu20.04 LTS システムのデフォルト ソース ソース リスト ファイルの変更
誤って source.list の内容を変更し、一連のエラーが発生した場合は、デフォルトのソース フ...
シンプルなタブバー切り替えケースを実現するJavaScript
この記事では、タブバーの切り替え効果を簡単に実現するためのJavaScriptの具体的なコードを参考...
Linuxのwatchコマンドの使用
1. コマンドの紹介watch コマンドは、指定されたコマンドを定期的に実行し、実行結果を全画面に表...
抽選効果を実現するJavaScript
この記事では、宝くじマシンの効果を実現するためのJavaScriptの具体的なコードを参考までに共有...
MySQL でパーセンテージと最初の数パーセントを表示する方法
目次必要とする実装コードデータベース数日前、友人からこれを書くのを手伝ってほしいと頼まれました。ただ...
テーブルを使用してフォームコントロールの形式を調整し、見栄えを良くします。
自分でウェブページを書きたいので、HTML 言語についても少し勉強しています。これは、大学時代にウェ...
JavaScript が Jingdong の虫眼鏡効果を模倣
この記事では、Jingdongの虫眼鏡効果を実現するためのJavaScriptの具体的なコードを紹介...
CSS3でよく使われるスタイルの詳しい解説[基本的なテキストとフォントのスタイル]
概要: Web ページをより美しく見せるために、ここでは CSS3 でよく使用されるスタイルをいくつ...
Docker+gitlab+jenkins は、ゼロから自動デプロイメントを構築します
目次序文： 1. Dockerをインストールする2. DockerでJenkinsをインストールする...
MySQL 8.0.20 圧縮版のインストールチュートリアル（画像とテキスト付き）
1. MySQL ダウンロード アドレス。 http://ftp.ntu.edu.tw/MySQL...
CSS で垂直方向の中央揃えを実装するいくつかの方法の概要
フロントエンドのレイアウト プロセスでは、水平方向の中央揃えを実現するのは比較的簡単で、通常は ma...
JavaScriptの擬似配列と配列の使い方と違い
擬似配列と配列JavaScript では、5 つのプリミティブ データ型を除き、関数を含め、その他す...
データベース接続のURLの詳細な説明と概要
データベース接続のURLの詳細な説明と概要JDBC URL = プロトコル名 + サブプロトコル名 ...
CSS3のボックスサイズプロパティの興味深いボックスモデルについての簡単な説明
誰もがボックス モデルの構成を、内側から外側まで、コンテンツ、パディング、境界線、マージンについて知...
vue3のテレポート瞬間移動機能の使い方を詳しく解説
vue3テレポート瞬間移動機能の使用は参考用です。具体的な内容は次のとおりです。テレポートは通常、瞬...