大厂h5开源视频系列 - 搜狗:每个人都是一句诗

前言

大厂h5开源视频系列 是一个专题，在这个专题中咱们会解析一些酷酷的线上h5,在每个细节，每个细腻的过渡背后都能看到前端工程师付出的心血，本篇带来的是👉👉 搜狗：每个人都是一句诗

---

线上链接请戳👉👉 每一个人都是一首诗你们可自行感觉下。 天地造人，每一个人心里深处都藏着一句诗，那就是这我的的灵魂。 咱们一块儿学习一下这个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移动端响应插件。这里简单的介绍下：

常见的移动端布局方式

一、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>
复制代码

分析

从html中可看出做者将这个页分为三层，上层是图片层，中间是题目，下层是选项的布局。结果页、推广页和其差很少，这里就不在展开 每一个页面的css我也将其分开放在不一样的文件夹里，方便你们查看。

连接地址请👉👉这里 连接地址

3、页面逻辑

写到这里差很少每一个页面都写完了，最关键的一点就是如何将因此的页面组织起来。经过查看做者的源码，发现这个h5采用的仍是jquery的方式。经过display:none来链接整个H5界面。这里我将源码的js部分抽离出

连接地址请👉👉这里 连接地址

源码

这是把因此的页面都分割开了，每一个文件都放至各自的界面。整个h5我页也布置在gitPag上，不过题目只写了一个，由于每一个都是同样的，我就没有重复去写，感兴趣的也能够看看源码。

须要源码请👉👉这里： 源码地址

线上体验请👉👉这里： 体验

结论

你们在学习的时候是否是只单独知道每一个css属性，综合例子没有思路，不知道怎么动手，快快结合上面的讲解动起手来。

欢迎关注本系列文章，有问题能够加入👇👇👇群聊和我一块儿讨论。最后祝你们五一快乐！！