iphone刘海屏页面适配

最新推荐文章于 2022-06-10 17:57:45 发布

web-小徐

最新推荐文章于 2022-06-10 17:57:45 发布

阅读量2.1k

点赞数

本文链接：https://blog.csdn.net/weixin_43858667/article/details/89960587

版权

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

在这里插入图片描述

	<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>

web-小徐

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
iphone刘海屏页面适配

下面是实现iphonex 刘海屏前端页面适配的一个插值算法小案例 <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body, ul { m...
复制链接

扫一扫