フロントエンドプロジェクト-Shangyou [HTML/CSS/JS技術総合演習]

• 章1 ページレイアウト
• 1-1 プロジェクトの説明
• 1-2 ログイン登録レイアウト構築
• 1-3 リストレイアウトの構築
• 1-4 ロゴと検索ボックス
• 1-5 製品カテゴリのナビゲーション レイアウト
• 1-6 パスナビゲーションのレイアウト
• 1-7 パスナビゲーションデータの動的レンダリング
• 章2 虫眼鏡効果
• 2-1 左側の虫眼鏡レイアウト構築
• 2-2 虫眼鏡マウスの出入り効果
• 2-3 虫眼鏡マウスを動かしてマスク要素のドラッグ効果を実現します
• 2-4 マスク要素の移動の境界制御
• 2-5 虫眼鏡を動かすと、大きな画像要素を同じ割合で動かす効果が得られます。
• 2-6 虫眼鏡のサムネイルレイアウト構築効果
• 2-7 虫眼鏡サムネイルデータの動的レンダリング
• 2-8 サムネイルをクリックすると、画像が小さいか大きい画像に変わります。
• 2-9 サムネイル上の左右矢印クリックによる画像カルーセル効果の原理の解析
• 2-10 各画像の移動距離とULの移動距離を計算します
• 章3 右の商品
• 3-1 右の商品上部の詳細紹介のレイアウト
• 3-2 右側の製品上部の詳細説明では、データの動的レンダリングを紹介します
• 3-3 右の製品の下半分の製品パラメータのレイアウト構成
• 3-4 右側の製品の下半分の製品パラメータ データの動的レンダリング
• 章4 製品パラメータ
• 4-1 専用の効果を得るには、製品パラメータの最初の行のテキストの色をクリックします。
• 4-2 クロージャ関数を使用してループ内のイベントの変数の問題を解決する
• 4-3 選択結果のレイアウト構築を実装する
• 4-4 製品パラメータをクリックして、対応する結果を動的に追加します。
• 4-5 削除ボタンをクリックすると、該当するパラメータデータが削除されます。
• 4-6 パッケージ価格変更機能
• 章5 中央左のタブ
• 5-1 ショッピングカートと購入価格のレイアウト構築
• 5-2 左中央のタブの全体的な構造レイアウト
• 5-3 中央左タブの特定のコンテンツ レイアウトの構築
• 章6 中央右のタブ
• 6-1 中央の右側に一致する全体的な構造レイアウトを選択します
• 6-2 コロケーションでチェックボックスがオンになっている場合、パッケージ価格連動効果を選択します
• 6-3 中右のタブレイアウトの構築
• 章7 右のナビゲーションバー
• 7-1 パブリックタブ関数をカプセル化して呼び出す
• 7-2 右ナビゲーションバーの作業部分の構築
• 7-3 右ナビゲーションバーの中央レイアウトの構築
• 7-4 右側のナビゲーションバーをクリックしてステータスを切り替える実装