JavaScriptはXiaomi Mall公式サイトの完全なページ実装プロセスを模倣します

JavaScriptはXiaomi Mall公式サイトの完全なページ実装プロセスを模倣します

気づかないうちに、フロントエンドを 4 か月近く学んでいました。JavaScript を学ぶ前は、自分が作ったプロジェクトを見ることはできても、実際に触ることはできませんでした。Xiaomi の公式 Web サイトにあるこのページは、私が書いた最初の比較的完成度の高いプロジェクトです。まだ改善の余地はたくさんありますが、将来に期待しています。

このブログは主に、このプロジェクトの作成時に遭遇したいくつかの問題、対応する方法の発見、およびこのプロジェクトの作成時に遭遇した落とし穴の記録に関するものです。

1. ホームページ制作

ホームページの主な効果は以下のとおりです。

アプリをダウンロードし、ショッピングカートを作成し、2つのナビゲーションバーを作成し、カルーセル画像を作成します

全体的なレイアウトが完了したら、JavaScript を使用して詳細を処理する必要があります。

1. ダウンロードアプリの制作

ここでどのような効果が必要でしょうか? マウスをダウンロードアプリに移動するとダウンロード QR コードが表示され、マウスを離すと消えます。これは私たちがこれまでに行ってきた多くのエフェクトと同じものですが、彼は特別なのでしょうか?彼は特別です。現れたり消えたりする時にアニメーション効果がかかるのが特徴です。では、なぜ Xiaomi オリジナルはこんなにもスムーズなのでしょうか?表示属性を使うかアニメーションを使うか迷っていたところ、とても気の利いた属性を思いつきました!このボックスの高さを変更し、トランジション効果と overflow:hidden 属性を使用して効果を最大限に高めることができます。

しかし、ここには落とし穴があるでしょう。上記の小さな三角形の場合、境界線を使用してボックスの外側に配置できます。この小さな三角形を QR コード ボックス (.download) 内に配置すると、配置する上の値が負になり、ボックスを超えてしまいます。ボックスを超えると、非表示になります。したがって、小さな三角形を外側に配置し、ボックスの上に配置し、表示属性を使用して効果を完成させることしかできません。これを説明するのはあまり直感的ではないかもしれないので、コードから始めましょう。

HTMLコード:

   <li id="ダウンロード">
       <a href="#" rel="external nofollow" rel="external nofollow" >アプリをダウンロード</a>
       <i></i>
       <div class="ダウンロード">
             <a href="#" rel="外部nofollow" rel="外部nofollow" >
             <img src="./image/ホームページ画像/xiaomi-android.png" alt="">
                 Xiaomi モール アプリ
             </a>
       </div>
  </li>

CSS コード: (less バージョン)

     li {
            フロート: 左;
            パディング:8px;
            右パディング: 0; 
                {
                    表示: ブロック;
                    高さ: 15px;
                    テキスト配置: 中央;
                    右パディング: 8px;
                    右ボーダー:1px 実線 #423c37 ;
                    フォントサイズ: 8px;
                    色: #b0b0b0;
                    &:ホバー{
                         色: #fff;
                         }
                } 
            }
            #ダウンロード{
                位置: 相対的;
                幅: 68px;
                私 {
                    表示: なし;
                    位置: 絶対;
                    上: 20px;
                    左: 25px;
                    幅:0;
                    高さ:0;
                    border-color: 透明 透明 白 透明;
                    // border-color:transparent #ccc transparent transparent;
                    境界線スタイル:solid;
                    境界線の幅:8px;
                    zインデックス: 9;
                   
                }
           
            .ダウンロード{
                位置: 絶対;
                上: 16px;
                左: -28px;
                上マージン: 20px;
                幅: 130ピクセル;
                高さ: 0;
                オーバーフロー: 非表示;
                ボックスの影: 0px 1px 5px #aaa;
                // 境界線:1px 実線 #ccc;
                背景色: #fff;
                トランジション: 高さ .3 秒;
                zインデックス: 999; 
                {
                    フォントサイズ: 14px;
                    色: #000;
                    境界線: 0;
                    &:ホバー{
                        色: #000;
                    }
                    画像{
                        表示: ブロック;
                        幅: 100ピクセル;
                        高さ: 100px;
                        マージン: 15px;
                    } 
                }
            }
            }

jsコード:

  var APP = this.document.getElementById('ダウンロード')
  var ダウンロード = this.document.querySelector('.download');
 
 
  APP.addEventListener('mouseenter', 関数() {
    ダウンロード.style.height = 160 + 'px';
    APP.children[1].style.display = 'ブロック';
 
  });
  APP.addEventListener('mouseleave', 関数() {
    ダウンロード.style.height = 0;
    APP.children[1].style.display = 'なし';
 
  });

注意: このコードは完全ではないため、実行できない可能性があります。参照のみを目的としています。

ショッピングカートも同様に作られています。

2. ナビゲーションバーの制作

ナビゲーション バー ボックスも、上記と同じ方法で高さを指定して完成させることができます。重要な点は、上のナビゲーション バーをタッチすると、対応する製品バーが下に表示されることです。同時に、この製品バー内の任意の要素をタッチすることができ、マウスがナビゲーション バーの外側に移動すると、製品バーが消えます。

この効果を見たとき、最初に思ったのは、これはタブ バーを切り替えるのと同じではないでしょうか。マウスのクリック イベントをマウスの移動イベントに変更するだけで十分ではないでしょうか。しかし、私は本当に十分に考えていなかったのです。マウスをナビゲーション バーから移動して製品バーに移動しようとすると、製品バーがすぐに消えてしまい、その結果、製品バーは見えるだけで触れることができない状態になりました。したがって、次のように、製品列を対応するナビゲーション バーに書き込むことしかできません。

対応する図:

次は簡単になります。スタイルを変更し、コンテンツを変更し、残りの js コードを追加するだけです。

3. カルーセル画像の制作

カルーセル チャートの場合は、スワイパー プラグインを使用して直接書き込むことができます。

ウェブサイト: Swiper 中国語ウェブサイト - スライドショー js プラグイン、H5 ページ フロントエンド開発

エフェクトのデモンストレーションから好きなテンプレートを選択して修正します。自分でコードを書くよりもはるかに簡単です!こんなプラグインが開発できるのだから、当然それを使うべきだ!

2. ログインページおよび登録ページの作成

このページを作ったとき、左側を固定し、右側の余白値を絞りました。しかし、後で承認したときに、レイアウトが十分にシンプルではないことがわかりました。左と右を直接レイアウトし、左側の画像にパーセンテージレイアウトを使用できます。

1. ボックスレイアウト

このページの核となるコンテンツは中央のボックスです。登録ページとログインページは同じページに書かれているので、それぞれの部分は次のようになります。

2 つのボックスを並べて配置します。上のボックスのログイン/登録ボタンをクリックすると、下のボックスでアニメーション切り替え効果が実行されます。

2. チェックボックスのスタイルの変更

チェックボックスのスタイルを変更する方法についてオンラインで見つけた方法の中に、本当に衝撃を受けたものがあります。つまり、別のボックスを書いて、元のチェックボックスを覆います。

この方法を見たとき、疑問がいっぱいでしたが、信じてください、本当に効果があります。コードは次のとおりです。

 #チェックボックス{
                    幅: 20px;
                    高さ: 20px;
                    表示: インラインブロック;
                    色: #ff6900;
                    マージン: 0;  
                    フォントサイズ: 14px;
                      
                   }
                入力[type=チェックボックス]{
                    幅: 20px;
                    高さ: 20px;
                    上マージン: 2px;
                    位置: 相対的;
                }
                入力[type=チェックボックス]::after {
                    位置: 絶対;
                    上: 0;
                    色: #000;
                    幅: 20px;
                    高さ: 20px;
                    表示: インラインブロック;
                    可視性: 可視;
                    左パディング: 0px;
                    テキスト配置: 中央;
                    コンテンツ: ' ';
                    // 境界線の半径: 3px;
                }
                入力[type=チェックボックス]:checked::after {
                    内容: "✓";
                    色: #fff;
                    フォントサイズ: 10px;
                    行の高さ: 20px;
                    背景色: rgb(255, 105, 0);
                }

3. ページジャンプ

この時点で、2 つのページはほぼ構築されており、残っているのは 2 つのページを接続することです。今回は、BOM オブジェクト内の場所属性を使用します。 (忘れてしまった場合は、以前のブログで関連する使い方を確認してください〜)。

ログインボタンをクリックするとログインセクションにジャンプし、登録ボタンをクリックすると登録セクションにジャンプしますが、問題はログインと登録が 1 つのページであるため、この時点でどのボタンをクリックしたかを判断するためのパラメータを渡す必要があることです。

クリックする前に:

クリック後:

そして

上記のコードの ?login は渡したパラメータです。登録ログインをリンクから送信ボタン(フォーム)に変更します。クリックすると、現在のボタンの値を取得して変数に格納します。ジャンプするときに、ジャンプ先のアドレスとパラメータを渡し、登録ページで渡されたパラメータ値を取得し、パラメータに基づいて操作を実行します。コードを見てください!

HTMLコード:

     <フォームアクション="#">
           <input type="submit" value="ログイン" name="ログイン" id="indexDL">
           <input type="submit" value="登録" name="register"id="indexZC">
     </フォーム>

インデックスページのjs:

 var indexDL = this.document.getElementById('indexDL');
  var indexZC = this.document.getElementById('indexZC');
  var temp1 = null;
  var temp2 = null;
  indexDL.addEventListener('click', 関数() {
    temp1 = インデックスDL.name;
    var newurl = 'login.html';
    // window.location.href = newurl;
    // window.location.assign(新しいURL);
    window.event.returnValue = false
    window.location.href = 'login.html' + '?' + temp1;
    // コンソールログ(temp1);
  });
  indexZC.addEventListener('クリック', 関数() {
    temp2 = インデックスZC.name;
    ウィンドウイベントの戻り値は false です。
    window.location.href = 'login.html' + '?' + temp2;
  });

関数はパラメータを渡すことです。

ログインページのjs:

    var temp3 = window.location.search.substr(1);
    if(temp3 === 'レジスタ'){
        ZC.クリック();   
    }

この関数は、文字列を切り取り、それが必要なパラメータであるかどうかを判断します。

要約: これは、html+css+JavaScript の最初の完全なケースです。書くのは大変でしたが、それでもこのケースを通じて多くの新しい知識を学びました。最も重要な点は、フロートを使用した後はクリアする必要があることを覚えておくことです。

Xiaomi公式サイトのJavaScript模倣完全ページ実装プロセスに関するこの記事はこれで終わりです。より関連性の高いJavaScript Xiaomi公式サイトコンテンツについては、123WORDPRESS.COMの以前の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後も123WORDPRESS.COMを応援していただければ幸いです。

以下もご興味があるかもしれません:
  • js は Xiaomi 公式サイトの画像カルーセルの特殊効果を模倣します
  • JavaScript が Xiaomi のカルーセル効果を模倣
  • js でショッピングモールのシミュレーションを実現
  • JavaScript に基づくショッピング モールの商品カウントダウンの例
  • JavaScript はショッピングモールをシミュレートして画像広告カルーセルのサンプルコードを実装します

<<:  HTML の相対パス (Relative Path) と絶対パス (Absolute Path) の詳細な理解

>>:  MySQLカバーインデックスの利点

推薦する

親子コンポーネントの通信を解決するための3つのVueスロット

目次序文環境の準備カテゴリコンポーネントアプリのコンポーネント1. デフォルトスロット2. 名前付き...

altとtitleの違いの詳しい説明

これら 2 つの属性はよく使用されますが、その違いはまとめられていません。それでは、その使い方をまと...

mysql5.7.18.zip インストール不要版設定チュートリアル(Windows)

これは私が以前使用した mysql5.7.18.zip のインストール チュートリアルです。まずこれ...

フロントエンド JavaScript におけるリフレクションとプロキシ

目次1. 反射とは何ですか? 2. JavaScriptで反映する2.1 Reflect.get(タ...

MySQLのビューとインデックスの使い方と違いの詳細な説明

MySQL ビュー簡単に言えば、MySQL ビューは SELECT コマンドを定義するためのショート...

HTML マルチメディア アプリケーション: Web ページにフラッシュ アニメーションと音楽を挿入する

1. HTML_falshアニメーションでのマルチメディアの応用(WebページへのFlashアニメー...

Vue3 でモバイル ログインおよび登録モジュールをエレガントに実装する方法

目次序文入力ボックスコンポーネントレイアウトvモデルデータ検証ルール設計形状サブコンポーネントは検証...

Vue でよく使われる命令 v-if と v-show の違いを簡単に分析します。

目次序文1.v-ショー2.v-if 3. v-showとv-ifの違い1. 原則の違い2. アプリケ...

Linux の RPM パッケージでインストールされた xinetd ベースのサービスの管理

目次序文1. xinetdサービスに基づく起動管理(1)Telnetサービスのインストール(2)Te...

フロントエンドネットワーク、JavaScriptの最適化、開発のヒントについて簡単に説明します。

1. ネットワークの最適化YSlowには23のルールがあります。これら数十のルールは、主に、不要な...

JavaScriptでマクロを使用する方法

言語では、DSL を実装するためにマクロがよく使用されます。マクロを使用すると、開発者は JSX 構...

Centos7 でスーパーバイザ デーモンをインストールして設定する方法

初心者は自分で録音しましょう1. スーパーバイザーをインストールします。 Supervisor は ...

40 CSS/JSスタイルと機能的な技術処理

1-ドロップダウン選択ボックスのスタイル設定 - ドロップダウン リストを変更します。 2- <...

モバイル端末の適応により、px は自動的に rem に変換されます。

まずpostcss-pxtoremをインストールします: npm install postcss-p...

Windows10のマウスを模倣して境界線を光らせる効果を実現するCSSの詳細解説

最新の Windows 10 アップデートをインストールした後、システム UI の詳細な効果が顕著に...