iphone刘海屏页面适配方法
程序员文章站
2023-12-12 22:30:46
1. 下面是实现iphonex 刘海屏前端页面适配的一个插值算法小案例
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刘海屏页面适配方法详解整合,希望对大家有所帮助