プロジェクトの説明
ログイン登録レイアウト構築
リストレイアウトの構築
ロゴと検索ボックス
製品カテゴリのナビゲーション レイアウト
パスナビゲーションのレイアウト
パスナビゲーションデータの動的レンダリング
左側の虫眼鏡レイアウト構築
虫眼鏡マウスの出入り効果
虫眼鏡マウスを動かしてマスク要素のドラッグ効果を実現します
マスク要素の移動の境界制御
虫眼鏡を動かすと、大きな画像要素を同じ割合で動かす効果が得られます。
虫眼鏡のサムネイルレイアウト構築効果
虫眼鏡サムネイルデータの動的レンダリング
サムネイルをクリックすると、画像が小さいか大きい画像に変わります。
サムネイル上の左右矢印クリックによる画像カルーセル効果の原理の解析
各画像の移動距離とULの移動距離を計算します
右の商品上部の詳細紹介のレイアウト
右側の製品上部の詳細説明では、データの動的レンダリングを紹介します
右の製品の下半分の製品パラメータのレイアウト構成
右側の製品の下半分の製品パラメータ データの動的レンダリング
専用の効果を得るには、製品パラメータの最初の行のテキストの色をクリックします。
クロージャ関数を使用してループ内のイベントの変数の問題を解決する
選択結果のレイアウト構築を実装する
製品パラメータをクリックして、対応する結果を動的に追加します。
削除ボタンをクリックすると、該当するパラメータデータが削除されます。
パッケージ価格変更機能
ショッピングカートと購入価格のレイアウト構築
左中央のタブの全体的な構造レイアウト
中央左タブの特定のコンテンツ レイアウトの構築
中央の右側に一致する全体的な構造レイアウトを選択します
コロケーションでチェックボックスがオンになっている場合、パッケージ価格連動効果を選択します
中右のタブレイアウトの構築
パブリックタブ関数をカプセル化して呼び出す
右ナビゲーションバーの作業部分の構築
右ナビゲーションバーの中央レイアウトの構築
右側のナビゲーションバーをクリックしてステータスを切り替える実装
Shangyouyou は、HTML、CSS、JavaScript の技術を総合的に応用したモールプロジェクトで、フロントエンド初心者がしっかりとした基礎を築き、プロジェクト経験を積むのに適しています。このプロジェクトは実用性が高く、フロントエンドの基本的な知識を整理して統合するだけでなく、将来のより主流の技術の実践的な応用のための訓練の場も提供します。
