iphone劉海屏頁面適配方法

更新時間：2019年05月07日 15:59:39 作者：熬過春夏秋冬

這篇文章主要介紹了iphone劉海屏頁面適配方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

1. 下面是實現(xiàn)iphonex 劉海屏前端頁面適配的一個插值算法小案例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    body, ul {
      margin: 0;
    }

    ul {
      padding-left: 10px;
    }

    li {
      list-style: none;
    }

    .phone {
      position: relative;
      width: 600px;
      height: 300px;
      border: 10px solid #000;
      border-radius: 30px;
      margin: 100px auto 0;
    }

    .content, .content ul {
      width: 100%;
      height: 100%;
    }

    .content {
      overflow-x: hidden;
      overflow-y: scroll;
    }

    .camera {
      position: absolute;
      top: 60px;
      left: 0;
      width: 26px;
      height: 180px;
      background-color: black;
      border-radius: 0 30px 30px 0;
    }

    li + li {
      border-top: 1px solid #ccc;
    }

    li {
      font-size: 16px;
      padding: 5px;
    }

    *::-webkit-scrollbar {
      padding-left: 100px;
    }
  </style>
</head>
<body>
<div class="phone">
  <div class="content">
    <ul>
      <li>SweeTango</li>
      <li>Pacific Rose</li>
      <li>SnapDragon</li>
      <li>Envy</li>
      <li>Koru (Plumac)</li>
      <li>Pink Lady (Cripps Pink)</li>
      <li>HoneYcrisp</li>
      <li>Hoyal Gala</li>
      <li>Macoun</li>
      <li>SweeTango</li>
      <li>Pacific Rose</li>
      <li>SnapDragon</li>
      <li>Envy</li>
      <li>Koru (Plumac)</li>
      <li>Pink Lady (Cripps Pink)</li>
      <li>HoneYcrisp</li>
      <li>Hoyal Gala</li>
      <li>Macoun</li>
      <li>Macoun</li>
      <li>SweeTango</li>
      <li>Pacific Rose</li>
      <li>SnapDragon</li>
      <li>Envy</li>
      <li>Koru (Plumac)</li>
      <li>Pink Lady (Cripps Pink)</li>
      <li>HoneYcrisp</li>
      <li>Hoyal Gala</li>
      <li>Macoun</li>
      <div class="camera"></div>
    </ul>
  </div>
</div>
<script>
  ~~function () {
    var thresh = 20;
    var maxoffset = 50;
    var aLi = document.querySelectorAll('li');
    var oCamera = document.querySelector('.camera');
    var oContent = document.querySelector('.content')
    var camPs = oCamera.getBoundingClientRect();


    ~~function () {
      oContent.onscroll = arguments.callee;
      for (var item of aLi) {
        var itemRect = item.getBoundingClientRect();
        var dtf = itemRect.bottom - camPs.top
        var dtb = itemRect.bottom - camPs.bottom
        if (Math.abs(dtf) < 20) {
          item.style.transform = 'translateX(' + lerp(0, 30, cal(dtf, 20)) + "px)";

        } else if (dtf > 20 && dtb < -20) {
          item.style.transform = 'translateX(' + 30 + "px)";
        } else if (Math.abs(dtb) <20) {
          item.style.transform = 'translateX(' + lerp(30, 0, cal(dtb, 20)) + "px)";
        } else {
          //全部移除攝像頭區(qū)域
          item.style.transform = 'translateX(' + 0 + "px)";
        }
      }
    }()
  }()

  /**
   * @param 插值算法
   * @param p1 初始化狀態(tài)
   * @param p2 結束狀態(tài)
   * @param t  時間函數(shù) (0-100%)
   *
   * 返回p1 到 p2 之間的值
   */
  function lerp(p1, p2, t) {
    return (p2 - p1) * t + p1
  }

  function cal(dis, thr) {
    return (dis + thr) / (thr * 2)
  }
</script>
</body>
</html>

以上所述是小編給大家介紹的iphone劉海屏頁面適配方法詳解整合，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章: