iphone劉海屏頁面適配方法

來源：懂視網責編：小采時間：2020-11-27 21:57:25

iphone劉海屏頁面適配方法

iphone劉海屏頁面適配方法:1. 下面是實現iphonex 劉海屏前端頁面適配的一個插值算法小案例 <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>Title</title> <style&

推薦度：

點擊下載本文 文檔為doc格式

導讀iphone劉海屏頁面適配方法:1. 下面是實現iphonex 劉海屏前端頁面適配的一個插值算法小案例 <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>Title</title> <style&

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劉海屏頁面適配方法詳解整合，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

iphone劉海屏頁面適配方法

推薦度：

點擊下載本文 文檔為doc格式

標簽：屏幕 iphone 頁面

熱門焦點

iphone劉海屏頁面適配方法

iphone劉海屏頁面適配方法

iphone劉海屏頁面適配方法

最新推薦

猜你喜歡

熱門推薦