クールなページング効果を実現するネイティブ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 モード例の詳細な説明
推薦する
Centos7.3 で mysql5.7.18 をインストールして初期パスワードを変更する方法
この記事では、Centos7.3でのmysql5.7.18のインストールと初期パスワードの変更につい...
JS配列メソッドの詳細な説明
目次1. 元の配列が変更されます1. プッシュ(): 2.ポップ(): 3. シフト(): 4.un...
MySQL の count 関数の正しい使い方の詳細な説明
1. 説明MySQLでは、テーブル内の行の総数を取得する必要がある場合、通常は次の文を使用します。 ...
デザイン協会: なぜ間違った場所を探したのですか?
数日前、バスで仕事に行きました。バスのカードリーダーの実際の使用シーンを実際に見て、カードリーダーの...
Tomcat を使用して Centos 環境に SpringBoot WAR パッケージをデプロイする
戦争パッケージを準備する1. 既存のSpringBootプロジェクトを準備し、pomに依存関係を追加...
CSS 読み込み効果の実装 パックマン
えーっと、名前はただの推測です 2333序文これは練習用の CSS デモです。何か間違っている点があ...
コンテンツ領域の周囲を回転する CSS 動的グラデーション ボーダーの効果 (サンプル コード)
レンダリング ネットで関連情報を調べたところ、現在のダイナミックグラデーションボーダーの実装方法のほ...
React Nativeのカスタムルーティング管理に関する深い理解
目次1. カスタムルーティング2. タブナビゲーション3. データの返却要約する1. カスタムルーテ...
CSS 要約ノート: 変換、遷移、アニメーションの例
1.移行遷移プロパティの使用法: transition :transition-property t...
jQuery はピッカーをシミュレートしてスライド選択効果を実現します
この記事では、スライド選択効果を実現するピッカーをシミュレートするjQueryの具体的なコードを参考...
MySQL の NULL と空の文字列
最近、MySQL に触れました。昨日、テーブル構造情報を格納するための新しいテーブルを作成しました。...
Linux ドメイン ネーム サービス DNS 設定方法
DNSとはDNS の正式名称は Domain Name System で、ドメイン名解決システムを意...
SQL文のパフォーマンスを分析するための標準的な要約
この記事では、explain を使用して SQL ステートメントを分析する方法を紹介します。実際、イ...
ウェブページのカラーマッチングスキルについての簡単な説明（フロントエンド開発者必読）
一般的に、Web ページの背景色は、より柔らかく、よりシンプルで、より明るく、暗いテキストとマッチし...
mysql 解凍パッケージの基本インストールチュートリアル
新しいコンピューターに変更したので、すべての環境を新しいコンピューター上で設定する必要があります。ふ...