JavaScript仿小米商城官網(wǎng)完整頁面實(shí)現(xiàn)流程
不知不覺學(xué)習(xí)前端已經(jīng)快4個(gè)月啦，之前沒學(xué)JavaScript之前做的項(xiàng)目都只能看不能玩，小米官網(wǎng)這個(gè)頁面算上寫出的第一個(gè)相對(duì)完整一點(diǎn)的項(xiàng)目，雖然需要進(jìn)步的地方還有很多，但是未來可期！
本篇博客主要是針對(duì)在書寫這個(gè)項(xiàng)目時(shí)遇到的一些問題，找出對(duì)應(yīng)的方法，記錄一下自己在寫這個(gè)項(xiàng)目時(shí)踩過的坑。
一、首頁的制作
首頁的主要效果有如下幾個(gè)：
下載APP、購物車的制作兩個(gè)導(dǎo)航欄的制作輪播圖的制作
當(dāng)我們把布局大致完成后，就需要開始使用JavaScript處理細(xì)節(jié)了。
1.下載APP的制作
這里需要一個(gè)怎樣的效果呢，當(dāng)鼠標(biāo)移動(dòng)到下載app時(shí)，下載二維碼出現(xiàn)，移出消失。這跟我們之前做的很多效果都一樣，但他特別嗎？他特別。特別就特別在這個(gè)出現(xiàn)和消失都有一個(gè)動(dòng)畫效果。那么小米原版到底為什么那么絲滑呢？在糾結(jié)到底使用display屬性還是動(dòng)畫時(shí)，突然想到一個(gè)很巧妙的屬性！我們可以變化這個(gè)盒子的高度，搭配過渡效果和overflow：hidden屬性，讓效果直接拉滿。
但是這里會(huì)有一個(gè)坑在里面。上面這個(gè)小三角，我們可以使用邊框來做，然后定位在這個(gè)盒子外面。如果我們將這個(gè)小三角以這個(gè)二維碼盒子（.download）里面的話，我們定位的top值為負(fù)，即會(huì)超出盒子，一旦超出就會(huì)隱藏掉，所以我們只能把小三角放在外面，然后定位到盒子上方，再配合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';
});
注：該代碼并不是完整代碼可能導(dǎo)致無法運(yùn)行，僅供參考
購物車也是同理制作。
2.導(dǎo)航欄的制作
導(dǎo)航欄這個(gè)盒子我們也可以和上面一樣，搭配高度完成，這個(gè)的主要點(diǎn)就是，當(dāng)我們觸摸上方的某一個(gè)導(dǎo)航欄，下面就會(huì)出現(xiàn)對(duì)應(yīng)的商品欄，同時(shí)我們可以觸摸這個(gè)商品欄里面的任何一個(gè)元素，而當(dāng)鼠標(biāo)移動(dòng)到導(dǎo)航欄外面就會(huì)讓商品欄消失。
看到這個(gè)效果我第一眼想的這不和tab欄切換一樣么，把鼠標(biāo)點(diǎn)擊事件變成鼠標(biāo)移入移出事件不就行了？但我屬實(shí)還是想的太少，當(dāng)鼠標(biāo)移出導(dǎo)航欄想要去到商品欄時(shí)，商品欄會(huì)直接消失，那效果就是只能看不能摸。所以我們只能把商品欄寫入對(duì)應(yīng)的導(dǎo)航欄里面，就像這樣。
對(duì)應(yīng)的圖：
接下來的事情就變得簡(jiǎn)單起來，改改樣式，換換內(nèi)容，把剩下的js代碼補(bǔ)充上。
3.輪播圖的制作
輪播圖的方面，我們可以使用swiper插件直接編寫。
網(wǎng)址：Swiper中文網(wǎng)-輪播圖幻燈片js插件,H5頁面前端開發(fā)
在效果演示中選擇一套自己喜歡的模板套上去，修修改改，比自己寫代碼要省事不少呢！既然有這種能夠加開發(fā)的插件，我們當(dāng)然要用起來！
二、登錄、注冊(cè)頁面的制作
這個(gè)頁面我做的時(shí)候是將左邊固定定位，右邊margin值擠過去的，但是后來驗(yàn)收的時(shí)候發(fā)現(xiàn)布局其實(shí)不夠簡(jiǎn)潔，我們可以直接左右布局，將左邊的圖片使用百分比布局就好。
1.盒子布局
這個(gè)頁面的核心內(nèi)容就是中間的盒子，因?yàn)樽?cè)登錄頁面寫在同一個(gè)頁面里，那么他們的局部應(yīng)該如下圖：
讓兩個(gè)盒子并排放置，當(dāng)我們點(diǎn)擊上面的登錄/注冊(cè)時(shí)，下面的盒子做動(dòng)畫切換效果。
2.復(fù)選框樣式更改
有關(guān)復(fù)選框更改樣式，在網(wǎng)上查看到的方法中，有一個(gè)方法讓我大為震驚！那就是再書寫一個(gè)盒子，蓋在原有的復(fù)選框上面。
我當(dāng)時(shí)看到這個(gè)方法是滿腦子問號(hào)，但別說，真實(shí)有效。代碼見下：
#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) ;
}
三、頁面跳轉(zhuǎn)
到這里兩個(gè)頁面其實(shí)搭建的也差不多了，剩下的事情，就是把兩個(gè)頁面串起來。這時(shí)候我們就要用到BOM對(duì)象中的location屬性了。（忘記的可以去前幾篇博客查看相關(guān)用法哦~）。
當(dāng)我們點(diǎn)擊登錄按鈕會(huì)跳轉(zhuǎn)到登錄板塊，點(diǎn)擊注冊(cè)會(huì)跳轉(zhuǎn)到注冊(cè)板塊，但問題是登錄注冊(cè)是一個(gè)頁面呀，所以我們這時(shí)候就要傳遞參數(shù)，判斷我們到底點(diǎn)擊了哪個(gè)按鈕。
點(diǎn)擊前：
點(diǎn)擊后：
而
中的?login就是我們傳遞過去的參數(shù)。我們將注冊(cè)登錄由a鏈接換成提交按鈕(表單），當(dāng)我們點(diǎn)擊時(shí)，獲取當(dāng)前按鈕的value值，并將這個(gè)值用變量存起來，在跳轉(zhuǎn)時(shí)，將跳轉(zhuǎn)地址和參數(shù)都傳遞過去，在注冊(cè)頁面獲取剛傳遞過來的參數(shù)值，根據(jù)參數(shù)來進(jìn)行操作?？创a！
html代碼：
<form action="#">
<input type="submit" value="登錄" name="login" id="indexDL">
<input type="submit" value="注冊(cè)" 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;
});
作用是傳遞參數(shù)。
login頁面的js：
var temp3 = window.location.search.substr(1);
if(temp3 === 'register'){
ZC.click();
}
作用是剪切字符串，并且判斷是否為我們想要的參數(shù)。
總結(jié)： 第一個(gè)html+css+JavaScript的完整案例，在寫的時(shí)候痛苦滿滿，但是通過這個(gè)案例還是學(xué)到了不少新的知識(shí)點(diǎn)，最重要的一點(diǎn)就是要記得，使用浮動(dòng)后一定要清除浮動(dòng)！
到此這篇關(guān)于JavaScript仿小米官網(wǎng)完整頁面實(shí)現(xiàn)流程的文章就介紹到這了,更多相關(guān)JavaScript 小米官網(wǎng)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
JavaScript實(shí)現(xiàn)通過鍵盤彈鋼琴的效果實(shí)例代碼
這篇文章主要給大家介紹了關(guān)于JavaScript實(shí)現(xiàn)通過鍵盤彈鋼琴效果的相關(guān)資料,通過JS代碼實(shí)現(xiàn)了鋼琴鍵盤的交互效果,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-03-03
Bootstrap導(dǎo)航欄各元素操作方法(表單、按鈕、文本)
這篇文章主要介紹了Bootstrap導(dǎo)航欄各元素操作方法，針對(duì)表單、按鈕、文本進(jìn)行操作，感興趣的小伙伴們可以參考一下2015-12-12
這篇文章主要介紹了JavaScript中的new 命令，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-05-05
今天小編就為大家分享一篇關(guān)于Javascript刪除數(shù)組里的某個(gè)元素，小編覺得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來看看吧2019-02-02
javascript的document中的動(dòng)態(tài)添加標(biāo)簽實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄獪\談javascript的document中的動(dòng)態(tài)添加標(biāo)簽實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-10-10
本文主要介紹了Js apply方法的相關(guān)知識(shí)，具有很好的參考價(jià)值，下面跟著小編一起來看下吧2017-02-02
使用PBFunc在Powerbuilder中支付寶當(dāng)面付款功能
這篇文章主要介紹了使用PBFunc在Powerbuilder中支付寶當(dāng)面付款功能的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-10-10
這篇文章主要介紹了JS小游戲之仙劍翻牌源碼,是一款比較經(jīng)典的卡牌類游戲,對(duì)于javascript游戲設(shè)計(jì)有不錯(cuò)的借鑒價(jià)值,需要的朋友可以參考下2014-09-09
JavaScript實(shí)現(xiàn)翻頁功能(附效果圖)
這篇文章主要介紹了JavaScript實(shí)現(xiàn)翻頁功能(附效果圖)，在項(xiàng)目需求中經(jīng)常遇到，今天小編抽時(shí)間給大家分享JavaScript實(shí)現(xiàn)翻頁功能實(shí)例代碼，需要的朋友參考下吧2017-02-02
JavaScript實(shí)現(xiàn)QQ聊天消息展示和評(píng)論提交功能
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)QQ聊天消息展示和評(píng)論提交功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05