大廠h5開源視訊系列 - 搜狗:每一個人都是一句詩
大廠h5開源視訊系列 是一個專題，在這個專題中我們會解析一些酷酷的線上h5,在每一個細節，每一個細膩的過渡背後都能看到前端工程師付出的心血，本篇帶來的是:point_right::point_right: 搜狗：每一個人都是一句詩
線上連線請戳:point_right::point_right:每個人都是一首詩大家可自行感受下。
我們一起學習一下這個h5裡面比較有意思的幾個部分
首屏loading部分
搜狗的loading採用最簡單的進度條來展示。我們先來看看這個html的結構，
<div class="body_logobg" id="loaddingWrap"> <div class="loadingbox xycenter"> <div class="loadingrange"> <div class="loading" id="loadingPercent" style="width: 100%;"></div> </div> <p id="loading">100%</p> </div> </div> 複製程式碼
分析：從html中我們並不難看出loading是由上下兩部分組成一個是進度條(loadingrang)，另一個就是文字的百分比。傳統的佈局寫法loadingrange做進度條的外框、loading做進度條的內容、文字單獨定義。但作者這裡採用了一種新奇的想法。margin-block-xxxx： 餘量-嵌段-xxxx去定義p標籤的文字。 官方翻譯：
margin-block-xxxx property defines the logical block end margin of an element, which maps to a physical margin depending on the element's writing mode, directionality, and text orientation.
意思是這是一種縮寫，它對應於margin-top，margin-right，margin-bottom，或margin-left屬性根據為定義的值writing-mode，direction和text-orientation。可以簡單的理解為就是定義文字左右上下的位置。
為了演示進度條載入的過程，我採用css動畫去繪製進度條內容。
.loading {
height: 100%;
background: #8f82bc;
border-radius: 4px;
color: #fff;
animation: prece 1.5s ease-out
}
複製程式碼
然後通過js去獲取這個進度條內容的寬度，把它轉換出來繪製在文字上。這裡需要注意浮點數帶來的影響。還不知道什麼是浮點數的可以自行google一下，這裡就不展開了。
(function(){
let interval = setInterval(increment, 100)
function increment () {
let num = parseFloat((($('#loadingPercent')[0].offsetWidth / 200).toFixed(2)*1000)/10) + '%'
$('#loading')[0].innerHTML = num
if (num === '100%') {
clearInterval(interval)
}
}
}())
複製程式碼
內容介面
值得一提的是整個h5的頁面都是基於一個外掛--- pageResponse 移動端響應外掛。這裡簡單的介紹下：
常見的移動端佈局方式
1、rem佈局，通過動態設定根目錄下的font-size達到元素大小“自適應”，通常和百分比佈局一起使用
2、固定畫素設固定視口寬度。
3、最費事的media query，根據裝置視口寬度不同設定不同的樣式，換句話說一個頁面有多套樣式。可以說是正宗的響應式佈局。
另闢蹊徑
在學習viewport的時候，我們就知道里面有scale這麼個東西，有的時候就會想按比例縮放整個頁面不就可以了。關於pageResponse大家可以一步文件檢視具體的使用方式。因此在我們header里加一個meta標籤這裡就不在描述了
分析
整個h5頁面的佈局在一個居中的模版中，因此作者將引言頁、答題頁、結果頁都放在一個div裡,然後通過pageResponse對所以內容處理。實現移動端的相容。
一、引言頁
按上述的分析，我們可以得到作者的html結構：
<div class="wrapper body_bg" id="minWrap"> <div class="minWrapper"> <!-- 引言頁 --> <div class="mainConbox wrapYinyan" id="introductionWrap"> <img id="introductionTxt" class="xycenter" src="./img/yinyan.png" alt=""> </div> <!-- 答題頁 --> <!-- 結果頁 --> </div> </div> 複製程式碼
你一看，可能會發出這樣的疑問：引言頁的介面這麼簡單？這是大廠開發的嗎？非也。作者在這裡的設計也是巧奪天工。
在這一頁，我原本跟大家一樣認為這應該是一個input吧，當看到作者的程式碼時，才發現高手真的是什麼武林祕籍都會。話不多說。跟我一起來結構一下作者的內力。
<div class="wrapIndex xycenter" id="indexWrap"> <img class="ycenter font_index" src="./img/index.png" alt=""> <a href="javascript:;" class="btn_start anipulse" id="btn_start"></a> <div class="input_text"> <div class="textbox" id='textbox' placeholder='1' contenteditable='true' max-length='4'>輸入姓名，探測最真實的你</div> </div> <div class="logo_ingdex"></div> </div> 複製程式碼
html裡真的沒用input的標籤。那作者是怎麼做到的呢？
分析
- writing-mode定義了文字水平或垂直排布以及在塊級元素中文字的行進方向。作者通過這個屬性設定文字的豎向排列writing-mode: vertical-lr;
- contenteditable表示元素是否可被使用者編輯。作者通過這個屬性將div設定為可編輯的去替代input。這樣的好處是可以避免去處理input的內含樣式
二、答題頁
答題頁相對於簡單一些。作者採用的是請求資料介面返回題目，都是在服務端獲取。這裡我們不考慮這一層。單單從前端的角度分析，其html的結構
<div class="mainConbox wrapAnswre displaynone" id="questionWrap"> <div class="answerbox" id="questionBox"> <div class="answerimg"> <img src="./dati/image_18.png" alt=""> </div> <div class="questionTit"> <span class="qnum qnum1"></span> <span class="qtit"> <img src="./dati/wenti_18.png" alt=""> </span> </div> <div class="questionoption"> <span class="option">A</span> </div> <div class="questionoption"> <span class="option">B</span> </div> <div class="questionoption"> <span class="option">C</span> </div> </div> </div> 複製程式碼
分析
從html中可看出作者將這個頁分為三層，上層是圖片層，中間是題目，下層是選項的佈局。結果頁、推廣頁和其差不多，這裡就不在展開 每個頁面的css我也將其分開放在不同的資料夾裡，方便大家檢視。
連結地址請:point_right::point_right:這裡 連結地址
三、頁面邏輯
寫到這裡差不多每個頁面都寫完了，最關鍵的一點就是如何將所以的頁面組織起來。通過檢視作者的原始碼，發現這個h5採用的還是jquery的方式。通過display:none來連線整個H5介面。這裡我將原始碼的js部分抽離出
連結地址請:point_right::point_right:這裡 連結地址
原始碼
這是把所以的頁面都分割開了，每個檔案都放至各自的介面。整個h5我頁也佈置在gitPag上，不過題目只寫了一個，因為每個都是一樣的，我就沒有重複去寫，感興趣的也可以看看原始碼。
需要原始碼請:point_right::point_right:這裡： 原始碼地址
線上體驗請:point_right::point_right:這裡：體驗
結論
大家在學習的時候是不是隻單獨知道每個css屬性，綜合例子沒有思路，不知道怎麼動手，快快結合上面的講解動起手來。
歡迎關注本系列文章，有問題可以加入:point_down::point_down::point_down:群聊和我一起討論。最後祝大家五一快樂！！
