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カバーインデックスの利点

推薦する

ApacheとTomcatを組み合わせて静的状態と動的状態を分離する方法

実験環境ApacheとTomcatは両方ともIPアドレス192.168.153.136のホストにイン...

フォーム内のどの隠し属性をフォームとともに送信できるか

フォーム内の visibility=hidden および display=none のフォーム要素は...

MySQLで現在の時間間隔の前日のデータをクエリする

1. 背景実際のプロジェクトでは、分散スケジュールされたタスク実行の状況に遭遇することがあります。ス...

CSS ボーダーは四隅の実装コードを追加します

1.html <div class="ログインボディ"> <...

JavaScript が Jingdong のカルーセル効果を模倣

この記事では、JD.comのカルーセル効果の表示を実現するためのJavaScriptの具体的なコード...

ES6 ループと反復可能オブジェクトの例

この記事では、ES6 の for ... of ループについて説明します。古い方法以前は、JavaS...

JS クロスドメイン XML - AS URLLoader を使用

最近、機能拡張の要件を受け取りました。ただし、新しい要件で参照されているデータインターフェイスは、X...

vue.js でよく使われる v 命令の解析

目次Vue でのモデルバインド表示の if の v-text の説明v-html: v-オンv-if...

CSS 背景と境界タグの例の詳細な説明

1. CSS背景タグ1.背景色を設定するbackground-ground-color プロパティは...

MYSQL の 3 つのツリー構造テーブル設計の長所と短所の簡単な分析と共有

目次導入質問設計 1: 隣接リストテーブルデザインSQL の例デザイン 2: パスの列挙テーブルデザ...

Windows 7 での MySQL 8.0.18 の導入とインストールのチュートリアル

1. 事前準備 (windows7+mysql-8.0.18-winx64) 1. ダウンロードアド...

Linx awk入門チュートリアルの詳細な説明

Awk はテキスト ファイルを処理するためのアプリケーションであり、ほぼすべての Linux システ...

CentOS8.0ネットワーク設定の実装

1. CentOS 7 と CentOS 8 のネットワーク構成の違い: VMware Workst...

Linux deb パッケージの解凍、変更、その他の操作方法のコード例

さまざまな理由により、debパッケージ内のさまざまなファイルの内容を直接変更する必要がある場合があり...

Windows で削除された MySQL 8.0.17 のルート アカウントとパスワードを回復する方法

少し前にSQLの独学を終え、MySQL 8.0.17をダウンロードしました。インストールして設定した...