当前位置： 移动技术网 > IT编程>脚本编程>vue.js > iphone刘海屏页面适配方法

iphone刘海屏页面适配方法

2019年07月20日  | 移动技术网IT编程  | 我要评论

九江网站建设,hp触摸板,许乐夫

1. 下面是实现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 {
          //全部移除摄像头区域
          item.style.transform = 'translatex(' + 0 + "px)";
        }
      }
    }()
  }()

  /**
   * @param 插值算法
   * @param p1 初始化状态
   * @param p2 结束状态
   * @param t  时间函数 (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刘海屏页面适配方法详解整合，希望对大家有所帮助

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网