溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了JavaScript如何實現仿小米商城官網頁面，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
首頁的主要效果有如下幾個：
下載APP、購物車的制作兩個導航欄的制作輪播圖的制作
當我們把布局大致完成后，就需要開始使用JavaScript處理細節了。
這里需要一個怎樣的效果呢，當鼠標移動到下載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';
});注：該代碼并不是完整代碼可能導致無法運行，僅供參考
購物車也是同理制作。
導航欄這個盒子我們也可以和上面一樣，搭配高度完成，這個的主要點就是，當我們觸摸上方的某一個導航欄，下面就會出現對應的商品欄，同時我們可以觸摸這個商品欄里面的任何一個元素，而當鼠標移動到導航欄外面就會讓商品欄消失。
看到這個效果我第一眼想的這不和tab欄切換一樣么，把鼠標點擊事件變成鼠標移入移出事件不就行了？但我屬實還是想的太少，當鼠標移出導航欄想要去到商品欄時，商品欄會直接消失，那效果就是只能看不能摸。所以我們只能把商品欄寫入對應的導航欄里面，就像這樣。
對應的圖：
接下來的事情就變得簡單起來，改改樣式，換換內容，把剩下的js代碼補充上。
輪播圖的方面，我們可以使用swiper插件直接編寫。
網址：Swiper中文網-輪播圖幻燈片js插件,H5頁面前端開發
在效果演示中選擇一套自己喜歡的模板套上去，修修改改，比自己寫代碼要省事不少呢！既然有這種能夠加開發的插件，我們當然要用起來！
這個頁面我做的時候是將左邊固定定位，右邊margin值擠過去的，但是后來驗收的時候發現布局其實不夠簡潔，我們可以直接左右布局，將左邊的圖片使用百分比布局就好。
這個頁面的核心內容就是中間的盒子，因為注冊登錄頁面寫在同一個頁面里，那么他們的局部應該如下圖：
讓兩個盒子并排放置，當我們點擊上面的登錄/注冊時，下面的盒子做動畫切換效果。
有關復選框更改樣式，在網上查看到的方法中，有一個方法讓我大為震驚！那就是再書寫一個盒子，蓋在原有的復選框上面。
我當時看到這個方法是滿腦子問號，但別說，真實有效。代碼見下：
#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();
}作用是剪切字符串，并且判斷是否為我們想要的參數。
感謝你能夠認真閱讀完這篇文章，希望小編分享的“JavaScript如何實現仿小米商城官網頁面”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
