大廠h5開源視頻系列 - 搜狗:每個人都是一句詩

時間 2019-12-05

標籤大廠 h5 開源視頻系列搜狗每個人都是一句简体版

原文原文鏈接

前言

大廠h5開源視頻系列是一個專題，在這個專題中咱們會解析一些酷酷的線上h5,在每個細節，每個細膩的過渡背後都能看到前端工程師付出的心血，本篇帶來的是👉👉 搜狗：每個人都是一句詩javascript

線上鏈接請戳👉👉 每一個人都是一首詩你們可自行感覺下。天地造人，每一個人心裏深處都藏着一句詩，那就是這我的的靈魂。咱們一塊兒學習一下這個h5裏面比較有意思的幾個部分css

首屏loading部分

搜狗的loading採用最簡單的進度條來展現。咱們先來看看這個html的結構，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.java

意思是這是一種縮寫，它對應於margin-top，margin-right，margin-bottom，或margin-left屬性根據爲定義的值writing-mode，direction和text-orientation。能夠簡單的理解爲就是定義文字左右上下的位置。jquery

爲了演示進度條加載的過程，我採用css動畫去繪製進度條內容。git

.loading {
  height: 100%;
  background: #8f82bc;
  border-radius: 4px;
  color: #fff;
  animation: prece 1.5s ease-out
}
複製代碼

而後經過js去獲取這個進度條內容的寬度，把它轉換出來繪製在文本上。這裏須要注意浮點數帶來的影響。還不知道什麼是浮點數的能夠自行google一下，這裏就不展開了。github

(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移動端響應插件。這裏簡單的介紹下：bash

常見的移動端佈局方式前端工程師

一、rem佈局，經過動態設置根目錄下的font-size達到元素大小「自適應」，一般和百分比佈局一塊兒使用

二、固定像素設固定視口寬度。

三、最費事的media query，根據設備視口寬度不一樣設置不一樣的樣式，換句話說一個頁面有多套樣式。能夠說是正宗的響應式佈局。

另闢蹊徑

在學習viewport的時候，咱們就知道里面有scale這麼個東西，有的時候就會想按比例縮放整個頁面不就能夠了。關於pageResponse你們能夠一步文檔查看具體的使用方式。所以在咱們header里加一個meta標籤這裏就不在描述了

分析

整個h5頁面的佈局在一個居中的模版中，所以做者將引言頁、答題頁、結果頁都放在一個div裏,而後經過pageResponse對因此內容處理。實現移動端的兼容。

1、引言頁

按上述的分析，咱們能夠獲得做者的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的內含樣式

2、答題頁

答題頁相對於簡單一些。做者採用的是請求數據接口返回題目，都是在服務端獲取。這裏咱們不考慮這一層。單單從前端的角度分析，其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>
複製代碼