iphone刘海屏页面适配方法


Posted in Javascript onMay 07, 2019

1. 下面是实现iphonex 刘海屏前端页面适配的一个插值算法小案例

iphone刘海屏页面适配方法

<!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刘海屏页面适配方法详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js中字符替换函数String.replace()使用技巧
Aug 14 Javascript
基于jquery的用鼠标画出可移动的div
Sep 06 Javascript
javascript获取鼠标点击元素对象(示例代码)
Dec 20 Javascript
代码分析jQuery四种静态方法使用
Jul 23 Javascript
JS实现alert中显示换行的方法
Dec 17 Javascript
JavaScript中将数组进行合并的基本方法讲解
Mar 07 Javascript
AngularJS上拉加载问题解决方法
May 23 Javascript
JavaScript和jQuery获取input框的绝对位置实现方法
Oct 13 Javascript
JAVA面试题 static关键字详解
Jul 16 Javascript
微信小程序如何播放腾讯视频的实现
Sep 20 Javascript
javascript 使用sleep函数的常见方法详解
Apr 26 Javascript
vue祖孙组件之间的数据传递案例
Dec 07 Vue.js
常见的浏览器存储方式(cookie、localStorage、sessionStorage)
May 07 #Javascript
JavaScript实现随机点名器实例详解
May 07 #Javascript
vue父组件触发事件改变子组件的值的方法实例详解
May 07 #Javascript
微信小程序:数据存储、传值、取值详解
May 07 #Javascript
微信小程序实现用table显示数据库反馈的多条数据功能示例
May 07 #Javascript
详解Vue前端生产环境发布配置实战篇
May 07 #Javascript
7个好用的JavaScript技巧分享(译)
May 07 #Javascript
You might like
地球防卫队:陪着奥特曼打小怪兽的人类力量 那些经典队服
2020/03/08 日漫
php实现高效获取图片尺寸的方法
2014/12/12 PHP
PHP 应用容器化以及部署方法
2018/02/12 PHP
php设计模式之备忘模式分析【星际争霸游戏案例】
2020/03/24 PHP
PHP快速导出百万级数据到CSV或者EXCEL文件
2020/11/27 PHP
轻轻松松学习JavaScript
2007/02/25 Javascript
Javascript学习笔记1 数据类型
2010/01/11 Javascript
一个js拖拽的效果类和dom-drag.js浅析
2010/07/17 Javascript
setInterval()和setTimeout()的用法和区别示例介绍
2013/11/17 Javascript
JavaScript使用Prototype实现面向对象的方法
2015/04/14 Javascript
jQuery中 attr() 方法使用小结
2015/05/03 Javascript
深入学习JavaScript中的Rest参数和参数默认值
2015/07/28 Javascript
详解JavaScript 中的 replace 方法
2016/01/01 Javascript
微信小程序 vidao实现视频播放和弹幕的功能
2016/11/02 Javascript
如何学JavaScript?前辈的经验之谈
2016/12/28 Javascript
jquery滚动条插件slimScroll使用方法
2017/02/09 Javascript
vue与TypeScript集成配置最简教程(推荐)
2017/10/17 Javascript
Vue+jquery实现表格指定列的文字收缩的示例代码
2018/01/09 jQuery
关于vue中的ajax请求和axios包问题
2018/04/19 Javascript
对Vue table 动态表格td可编辑的方法详解
2018/08/28 Javascript
深入理解webpack process.env.NODE_ENV配置
2020/02/23 Javascript
python使用pil生成缩略图的方法
2015/03/26 Python
Python实现的Google IP 可用性检测脚本
2015/04/23 Python
详解 Python 读写XML文件的实例
2017/08/02 Python
python给微信好友定时推送消息的示例
2019/02/20 Python
python中类的输出或类的实例输出为这种形式的原因
2019/08/12 Python
浅析python表达式4+0.5值的数据类型
2020/02/26 Python
8款精美的CSS3表单设计(登录表单/下拉选择/按钮附演示及源码)
2013/02/04 HTML / CSS
英文简历自荐信范文
2013/12/11 职场文书
三月学雷锋活动总结
2014/06/26 职场文书
事业单位年度考核评语
2014/12/31 职场文书
会议通知
2015/04/15 职场文书
党员学习中国梦心得体会
2016/01/05 职场文书
Python如何导出导入所有依赖包详解
2021/06/08 Python
JavaScript 事件捕获冒泡与捕获详情
2021/11/11 Javascript
使用python生成大量数据写入es数据库并查询操作(2)
2022/09/23 Python