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 相关文章推荐
xml和web特殊字符
Apr 28 Javascript
JQuery实现鼠标移动到图片上显示边框效果
Jan 09 Javascript
js动态创建标签示例代码
Jun 09 Javascript
JavaScript 学习笔记之变量及其作用域
Jan 14 Javascript
移除AngularJS下URL中的#字符的方法
Jun 19 Javascript
Summernote实现图片上传功能的简单方法
Jul 11 Javascript
js获取腾讯视频ID的方法
Oct 03 Javascript
JavaScript中EventLoop介绍
Jan 22 Javascript
Node.js中的cluster模块深入解读
Jun 11 Javascript
javascript实现摄像头拍照预览
Sep 30 Javascript
在vue中使用axios实现post方式获取二进制流下载文件(实例代码)
Dec 16 Javascript
一定要知道的 25 个 Vue 技巧
Nov 02 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
解决phpmyadmin 乱码,支持gb2312和utf-8
2006/11/20 PHP
PHP 日志缩略名的创建函数代码
2010/05/26 PHP
PHP实现更新中间关联表数据的两种方法
2014/09/01 PHP
PHP中strpos、strstr和stripos、stristr函数分析
2016/06/11 PHP
详解PHP5.6.30与Apache2.4.x配置
2017/06/02 PHP
提高 DHTML 页面性能
2006/12/25 Javascript
ExtJs事件机制基本代码模型和流程解析
2010/10/24 Javascript
File, FileReader 和 Ajax 文件上传实例分析(php)
2011/04/27 Javascript
CSS(js)限制页面显示的文本字符长度
2012/12/27 Javascript
javascript实现别踩白块儿小游戏程序
2015/11/22 Javascript
jQuery unbind()方法实例详解
2016/01/19 Javascript
JavaScript实现弹出模态窗体并接受传值的方法
2016/02/12 Javascript
js给table赋值的实例代码
2016/10/13 Javascript
微信开发 使用picker封装省市区三级联动模板
2016/10/28 Javascript
Angular ng-repeat遍历渲染完页面后执行其他操作详细介绍
2016/12/13 Javascript
JS实现页面打印功能
2017/03/16 Javascript
Vue 后台管理类项目兼容IE9+的方法示例
2019/02/20 Javascript
layer更改皮肤的实现方法
2019/09/11 Javascript
vue 遮罩层阻止默认滚动事件操作
2020/07/28 Javascript
typescript编写微信小程序创建项目的方法
2021/01/29 Javascript
Node.js中的异步生成器与异步迭代详解
2021/01/31 Javascript
[01:05:41]EG vs Optic Supermajor 败者组 BO3 第二场 6.6
2018/06/07 DOTA
详解Python读取配置文件模块ConfigParser
2017/05/11 Python
python2.7 json 转换日期的处理的示例
2018/03/07 Python
Python中一些不为人知的基础技巧总结
2018/05/19 Python
python多线程抽象编程模型详解
2019/03/20 Python
Python3 venv搭建轻量级虚拟环境的步骤(图文)
2019/08/09 Python
python默认参数调用方法解析
2020/02/09 Python
简单了解pytest测试框架setup和tearDown
2020/04/14 Python
Python抓包并解析json爬虫的完整实例代码
2020/11/03 Python
如何将Pycharm中调整字体大小的方式设置为&quot;ctrl+鼠标滚轮上下滑&quot;
2020/11/17 Python
python 解决函数返回return的问题
2020/12/05 Python
成人大专生实习期的自我评价
2013/10/02 职场文书
房产公证书范本
2014/04/10 职场文书
大学教师个人总结
2015/02/10 职场文书
巴黎圣母院读书笔记
2015/06/26 职场文书