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 のインストールと設定のチュートリアル
ElasticSearch クラスターは、クラスターを構築するための動態請求的方式と靜態配置文件をサ...
gdb を使用してカーネル シンボルをロードする arm-eabi-gdb 出力/ターゲット/製品/...
序文始める前に、ファイル属性とファイル属性を変更する方法について簡単に理解しておく必要があります。 ...
目次序文接続管理追加の接続管理ポート要約する序文皆さんの多くは、次のようなエラー メッセージに遭遇し...
このセクションでは、HTML のリスト要素について学習します。リストは、Web サイトのデザインにお...
目次導入導入集計関数 + over()ソート関数 + over() ntile() 関数 + ove...
目次序文単一ファイルコンポーネント基本概念シンプルなローダーコンポーネントコンテンツの解析コンポーネ...
同僚から助けを求められました。バックエンド システムへのログインは成功したものの、システムには正常に...
スタイル シートは、ドキュメントの表示方法、発音方法、または入力方法を記述します。XSL 言語は、X...
memcachedをインストールする yum インストール -y memcached #memcac...
1. コマンドの紹介gzip (GNU zip) コマンドは、ファイルの圧縮と解凍に使用されます。こ...
問題を見つける最近、プログラムのストレージを Mongodb に移行したところ、Guid 型が書き込...
テーブル user があり、フィールドは id、nick_name、password、email、p...
目次1. はじめに2. インストール3. 使用4. vueファイルの使用1. はじめに最近、手書き入...
カーネル: [root@opop ~]# cat /etc/centos-release CentO...