JavaScript仿小米商城官網完整頁面實現流程

Posted on by

不知不覺學習前端已經快4個月啦，之前沒學JavaScript之前做的項目都隻能看不能玩，小米官網這個頁面算上寫出的第一個相對完整一點的項目，雖然需要進步的地方還有很多，但是未來可期！

本篇博客主要是針對在書寫這個項目時遇到的一些問題，找出對應的方法，記錄一下自己在寫這個項目時踩過的坑。

一、首頁的制作

首頁的主要效果有如下幾個：

下載APP、購物車的制作兩個導航欄的制作輪播圖的制作

當我們把佈局大致完成後，就需要開始使用JavaScript處理細節瞭。

1.下載APP的制作

這裡需要一個怎樣的效果呢，當鼠標移動到下載app時，下載二維碼出現，移出消失。這跟我們之前做的很多效果都一樣，但他特別嗎？他特別。特別就特別在這個出現和消失都有一個動畫效果。那麼小米原版到底為什麼那麼絲滑呢？在糾結到底使用display屬性還是動畫時，突然想到一個很巧妙的屬性！我們可以變化這個盒子的高度，搭配過渡效果和overflow：hidden屬性，讓效果直接拉滿。

但是這裡會有一個坑在裡面。上面這個小三角，我們可以使用邊框來做，然後定位在這個盒子外面。如果我們將這個小三角以這個二維碼盒子（.download）裡面的話，我們定位的top值為負，即會超出盒子，一旦超出就會隱藏掉，所以我們隻能把小三角放在外面，然後定位到盒子上方，再配合display屬性，完成效果。描述起來可能不太直觀，上代碼！

html代碼：

   <li id="download">
       <a href="#" rel="external nofollow"  rel="external nofollow" >下載APP</a>
       <i></i>
       <div class="download">
             <a href="#" rel="external nofollow"  rel="external nofollow" >
             <img src="./image/主頁圖片/xiaomi-android.png" alt="">
                 小米商城APP
             </a>
       </div>
  </li>

css代碼：（less版）

     li {
            float: left;
            padding:8px;
            padding-right: 0; 
                a {
                    display: block;
                    height: 15px;
                    text-align: center;
                    padding-right: 8px;
                    border-right:1px solid #423c37 ;
                    font-size: 8px;
                    color: #b0b0b0;
                    &:hover {
                         color: #fff;
                         }
                } 
            }
            #download {
                position: relative;
                width: 68px;
                i {
                    display: none;
                    position: absolute;
                    top: 20px;
                    left: 25px;
                    width:0;
                    height:0;
                    border-color:  transparent transparent white transparent;
                    // border-color:transparent #ccc transparent  transparent;
                    border-style:solid;
                    border-width:8px;
                    z-index: 9;
                   
                }
           
            .download {
                position: absolute;
                top: 16px;
                left: -28px;
                margin-top: 20px;
                width: 130px;
                height: 0;
                overflow: hidden;
                box-shadow: 0px 1px 5px #aaa;
                // border:1px solid #ccc;
                background-color: #fff;
                transition: height .3s;
                z-index: 999; 
                a {
                    font-size: 14px;
                    color: #000;
                    border: 0;
                    &:hover {
                        color: #000;
                    }
                    img{
                        display: block;
                        width: 100px;
                        height: 100px;
                        margin: 15px;
                    } 
                }
            }
            }

js代碼：

  var APP = this.document.getElementById('download')
  var download = this.document.querySelector('.download');
 
 
  APP.addEventListener('mouseenter', function () {
    download.style.height = 160 + 'px';
    APP.children[1].style.display = 'block';
 
  });
  APP.addEventListener('mouseleave', function () {
    download.style.height = 0;
    APP.children[1].style.display = 'none';
 
  });

註：該代碼並不是完整代碼可能導致無法運行，僅供參考

購物車也是同理制作。

2.導航欄的制作

導航欄這個盒子我們也可以和上面一樣，搭配高度完成，這個的主要點就是，當我們觸摸上方的某一個導航欄，下面就會出現對應的商品欄，同時我們可以觸摸這個商品欄裡面的任何一個元素，而當鼠標移動到導航欄外面就會讓商品欄消失。

看到這個效果我第一眼想的這不和tab欄切換一樣麼，把鼠標點擊事件變成鼠標移入移出事件不就行瞭？但我屬實還是想的太少，當鼠標移出導航欄想要去到商品欄時，商品欄會直接消失，那效果就是隻能看不能摸。所以我們隻能把商品欄寫入對應的導航欄裡面，就像這樣。

對應的圖：

接下來的事情就變得簡單起來，改改樣式，換換內容，把剩下的js代碼補充上。

3.輪播圖的制作

輪播圖的方面，我們可以使用swiper插件直接編寫。

網址：Swiper中文網-輪播圖幻燈片js插件,H5頁面前端開發

在效果演示中選擇一套自己喜歡的模板套上去，修修改改，比自己寫代碼要省事不少呢！既然有這種能夠加開發的插件，我們當然要用起來！

二、登錄、註冊頁面的制作

這個頁面我做的時候是將左邊固定定位，右邊margin值擠過去的，但是後來驗收的時候發現佈局其實不夠簡潔，我們可以直接左右佈局，將左邊的圖片使用百分比佈局就好。

1.盒子佈局

這個頁面的核心內容就是中間的盒子，因為註冊登錄頁面寫在同一個頁面裡，那麼他們的局部應該如下圖：

讓兩個盒子並排放置，當我們點擊上面的登錄/註冊時，下面的盒子做動畫切換效果。

2.復選框樣式更改

有關復選框更改樣式，在網上查看到的方法中，有一個方法讓我大為震驚！那就是再書寫一個盒子，蓋在原有的復選框上面。

我當時看到這個方法是滿腦子問號，但別說，真實有效。代碼見下：

 #checkbox {
                    width: 20px;
                    height: 20px;
                    display: inline-block;
                    color: #ff6900;
                    margin: 0;  
                    font-size: 14px;
                      
                   }
                input[type=checkbox]{
                    width: 20px;
                    height: 20px;
                    margin-top: 2px;
                    position: relative;
                }
                input[type=checkbox]::after {
                    position: absolute;
                    top: 0;
                    color: #000;
                    width: 20px;
                    height: 20px;
                    display: inline-block;
                    visibility: visible;
                    padding-left: 0px;
                    text-align: center;
                    content: ' ';
                    // border-radius: 3px;
                }
                input[type=checkbox]:checked::after {
                    content: "✓";
                    color: #fff;
                    font-size: 10px;
                    line-height: 20px;
                    background-color: rgb(255, 105, 0)  ;
                }

三、頁面跳轉

到這裡兩個頁面其實搭建的也差不多瞭，剩下的事情，就是把兩個頁面串起來。這時候我們就要用到BOM對象中的location屬性瞭。（忘記的可以去前幾篇博客查看相關用法哦~）。

當我們點擊登錄按鈕會跳轉到登錄板塊，點擊註冊會跳轉到註冊板塊，但問題是登錄註冊是一個頁面呀，所以我們這時候就要傳遞參數，判斷我們到底點擊瞭哪個按鈕。

點擊前：

點擊後：

而

中的?login就是我們傳遞過去的參數。我們將註冊登錄由a鏈接換成提交按鈕(表單），當我們點擊時，獲取當前按鈕的value值，並將這個值用變量存起來，在跳轉時，將跳轉地址和參數都傳遞過去，在註冊頁面獲取剛傳遞過來的參數值，根據參數來進行操作。看代碼！

html代碼：

     <form action="#">
           <input type="submit" value="登錄" name="login" id="indexDL">
           <input type="submit" value="註冊" name="register"id="indexZC">
     </form>

index頁面的js：

 var indexDL = this.document.getElementById('indexDL');
  var indexZC = this.document.getElementById('indexZC');
  var temp1 = null;
  var temp2 = null;
  indexDL.addEventListener('click', function () {
    temp1 = indexDL.name;
    var newurl = 'login.html';
    // window.location.href = newurl;
    // window.location.assign(newurl);
    window.event.returnValue = false
    window.location.href = 'login.html' + '?' + temp1;
    //  console.log(temp1);
  });
  indexZC.addEventListener('click', function () {
    temp2 = indexZC.name;
    window.event.returnValue = false;
    window.location.href = 'login.html' + '?' + temp2;
  });

作用是傳遞參數。

login頁面的js：

    var temp3  = window.location.search.substr(1);
    if(temp3 === 'register'){
        ZC.click();   
    }

作用是剪切字符串，並且判斷是否為我們想要的參數。

總結： 第一個html+css+JavaScript的完整案例，在寫的時候痛苦滿滿，但是通過這個案例還是學到瞭不少新的知識點，最重要的一點就是要記得，使用浮動後一定要清除浮動！

到此這篇關於JavaScript仿小米官網完整頁面實現流程的文章就介紹到這瞭,更多相關JavaScript 小米官網內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：