クールなページング効果を実現するネイティブ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 モード例の詳細な説明
推薦する
NodeJSとブラウザにおけるこのキーワードの違い
序文JavaScript を学習した人なら誰でも、さまざまな環境で this がどこを指すかという問...
Linux 環境の Apache で https サービスを有効にする方法の詳細な説明
この記事では、Linux 環境の Apache で https サービスを有効にする方法について説明...
yum を使用して rpm と関連する依存関係をダウンロードして、docker をオフラインでインストールします。
yum を使用してすべての依存関係を一緒にインストールできますが、–downloadonly –d...
MySQL InnoDB ReplicaSet の簡単な紹介
目次01 InnoDBレプリカセットの紹介02 InnoDBレプリカセットの制限03 導入前に知って...
Docker での MySQL 8.0.20 のインストールと設定のチュートリアル
Dockerは参考までにMySQLバージョン8.0.20をインストールします。具体的な内容は以下のと...
Linux で推奨される 9 つの優れたコード比較ツールの概要
コードを書くとき、2 つのファイル間の違い、または同じファイルの異なるバージョン間の違いを知る必要が...
JavaScript キャンバスはマウスの動きに合わせてボールを動かすことを実装します
この記事の例では、マウスに従ってボールを動かすjsの具体的なコードを参考までに共有しています。具体的...
Vueは下部のポップアップウィンドウで複数選択を実装します
この記事の例では、下部のポップアップウィンドウで複数選択を実装するためのVueの具体的なコードを共有...
MySQLで行または列をソートする方法
方法：説明: どちらも達成できません:方法1: sp_product から sp.productid...
Reactの簡単な紹介
目次1. CDNの紹介1.1 react (最初にインポート) 1.2 react-dom（後ほど紹...
CentOS 7 ブートカーネルの切り替えとブートモードの切り替えの説明
Centos7 スイッチブートカーネル注: 必要に応じて、最初にyum update -yを実行して...
MYSQL フルバックアップ、マスタースレーブレプリケーション、カスケードレプリケーション、および半同期の概要
MySQL フルバックアップ1. バイナリログを有効にし、データベースから分離して別々に保存する v...
MySql バッチに挿入するときにデータの重複を避ける方法
目次序文1. ignore を挿入2. 重複キーの更新時3. を置き換える要約する序文Mysql は...
MySQL でのワイルドカードを使用したファジークエリの実装に関する簡単な説明
MySQL データベースでは、あいまいクエリが必要な場合にワイルドカードを使用します。まず、演算子と...
JavaScriptプロトタイプチェーン図のまとめと実践
目次プロトタイプチェーンプロトタイプチェーンに基づいてシンプルなJQueryライブラリを実装すること...