大厂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移动端响应插件。这里简单的介绍下：

常见的移动端布局方式

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我也将其分开放在不同的文件夹里，方便大家查看。

链接地址请👉👉这里 链接地址

三、页面逻辑

写到这里差不多每个页面都写完了，最关键的一点就是如何将所以的页面组织起来。通过查看作者的源码，发现这个h5采用的还是jquery的方式。通过display:none来连接整个H5界面。这里我将源码的js部分抽离出

链接地址请👉👉这里 链接地址

源码

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

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

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

结论

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

欢迎关注本系列文章，有问题可以加入👇👇👇群聊和我一起讨论。最后祝大家五一快乐！！