黑马程序员技术交流社区

标题: 前端代码--- iphone刘海屏页面如何适配 ? [打印本页]
作者: 长沙-小知姐姐    时间: 2019-5-9 17:11
标题: 前端代码--- iphone刘海屏页面如何适配 ?
本帖最后由 长沙-小知姐姐 于 2019-5-9 17:14 编辑

此篇会持续不断的更新前端硬核小知识 (包含代码) , 一篇实现一个功能 , 有需要的请点赞收藏喔


下面是实现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>










欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2