jQueryプラグインの毎日の積み重ねメニュー、参考までに、具体的な内容は次のとおりです。 スタックメニュー複数ページの特殊効果 効果は以下のとおりですコードセクション<!DOCTYPE html> <html> <ヘッド> <メタ文字セット="utf-8"> <title>スタックメニュー</title> <script src="js/jquery-3.4.1.min.js"></script> <スタイル> * { マージン: 0px; パディング: 0px; } #ボックス { 位置: 固定; 上: 0px; 下: 0px; 左: 0px; 右: 0px; 背景色: ライトグレー; } 。箱 { 位置: 絶対; 上: 0; 左: 0; 幅: 100%; 高さ: 100%; パディング上部: 10px; 左パディング: 70px; フォントの太さ: 太字; 色: 白; 遷移: すべて 0.5 秒の線形。 } .box1 { 背景色: #1abc9c; zインデックス: 1; } .box2 { 背景色: #2ecc71; zインデックス: 2; } .box3 { 背景色: #3498db; zインデックス: 3; } .box4 { 背景色: #9b59b6; zインデックス: 4; } .box5 { 背景色: #34495e; zインデックス: 5; } .box6 { 背景色: #f1c40f; zインデックス: 6; } #ボタン{ 色: 黒; zインデックス: 9; 位置: 固定; 幅: 30ピクセル; 高さ: 30px; /* 背景色:ライトグレー; */ 上: 5px; 左: 10px; フォントサイズ: 30px; カーソル: ポインタ; 遷移: すべて 0.3 秒線形。 ディスプレイ: フレックス; コンテンツの中央揃え: 中央; アイテムの位置を中央揃えにします。 } #btn:ホバー{ 色: 白; フォントの太さ: 太字; } #btn.チェック{ 変換: 回転(135度); 色: 白; フォントの太さ: 太字; } .box.check{ zインデックス: 99; } .box スパン{ カーソル: ポインタ; } </スタイル> </head> <本文> <div id="btn">×</div> <div id="ボックス"> <div class="box box1" data-index="1"><span>ページ 1</span></div> <div class="box box2" data-index="2"><span>ページ 2</span></div> <div class="box box3" data-index="3"><span>ページ 3</span></div> <div class="box box4" data-index="4"><span>ページ 4</span></div> <div class="box box5" data-index="5"><span>ページ 5</span></div> <div class="box box6" data-index="6"><span>ページ 6</span></div> </div> </本文> </html> <スクリプト> $(ドキュメント).ready(関数() { $("#btn").click(関数() { $(this).toggleClass("チェック"); if($(this).hasClass('check')){ $(".box").removeClass('チェック'); $(".box").arr().forEach(item=>{ var index = parseInt(item.attr("データインデックス")); アイテム.css({ 'トップ':40*インデックス+'px', '左':40*インデックス+'ピクセル' }) }) }それ以外{ $(".box").arr().forEach(item=>{ var index = parseInt(item.attr("データインデックス")); アイテム.css({ '上':'0px', '左':'0px' }) }) } }) $(".box span").click(function(){ $(".box").parent().removeClass('チェック'); $(this).parent().addClass('チェック'); $("#btn").click(); }) $.prototype.arr = 関数() { var that = this; var arr = []; (var i = 0; i < that.length; i++) の場合 { arr.push($(that[i])); } arr を返します。 } }) </スクリプト> アイデアの説明 レイアウトの効果はわかりやすい 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Ubuntu で中国語入力方法が使えない場合の解決策
>>: CentOS6.9 での MySQL 5.7.17 のインストールと設定のチュートリアル
目次1. マップを初期化する2. マップポイント3. 位置決めを有効にする4. マップの変更を監視す...
目次1.Vue.js の機能: 2.Observer.js 関数 (データハイジャック): 3. C...
最近、たくさんの人に改変してもらったフレームワークに取り組んでいます。毎日コードを見ていると目が回り...
コンピュータを再インストールし、最新バージョンのMySQLデータベースをインストールしました。その結...
目次1. オブジェクトの変更検出2. オブジェクトに関する質問配列変更検出3.1 背景3.2 実装I...
MySQL 変数は数多くありますが、その中には注目に値するものもあります。ここでは、参考までに、注目...
DPlayer.jsビデオプレーヤープラグインは使いやすい主な用途: ビデオの再生、監視の開始、終了...
Dockerfile は Docker イメージを構築するために使用されるファイルです。コマンドパラ...
Linux で実行可能プログラムまたは so の依存ライブラリを表示します。 Linux の実行可能...
序文プロジェクトのニーズにより、ストレージ フィールドは JSON 形式で保存されます。プロジェクト...
目的リクエスト アクセス ボリュームを制御するための Nginx ngx_http_limit_co...
Vue ルーティング this.route.push ジャンプ ページが更新されない1. 背景概要:...
序文最近、多くの新しい同僚がこの質問をしてきました。特に、homebrew を通じて自動的にインスト...
序文MySQL インデックスで最も重要なデータ構造は B+ ツリーなので、まずは B+ ツリーの原理...
最近、たまたま vue+springboot のフロントエンドとバックエンドの分離プロジェクトに触れ...