iphone X 的适配
2024-08-30 19:29:08
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;} .box {
max-width: 414px;
height: 480px;
border: solid #000;
margin: auto;
overflow: auto;
}
.shape {
float: left;
width: 30px; height: 340px;
/*shape-outside: polygon(0 0, 0 150px, 16px 154px, 30px 166px, 30px 314px, 16px 326px, 0 330px, 0 0);*/
transition: shape-outside .15s;
}
.liuhai {
width: 24px; height: 180px;
background:url(img/liuhai.png) no-repeat left center;
position: absolute;
margin-top: 150px;
}
.content ul {
list-style: none;
padding: 0;
margin: 0;
}
.content li {
border-bottom: 1px solid #eee;
padding: .5em;
}
</style> </head>
<body>
<div id="box" class="box">
<i id="shape" class="shape"></i>
<i class="liuhai"></i>
<div class="content">
<ul>
<li>为了防止看花眼</li>
<li>我就手动敲下面的文字</li>
<li>原本我偷懒</li>
...
<li>理论上还可以使用CSS region实现</li>
<li>但没有这个方法容易理解</li>
<li>但没有这个方法容易理解</li>
<li>但没有这个方法容易理解</li>
<li>但没有这个方法容易理解</li>
<li>但没有这个方法容易理解</li>
<li>但没有这个方法容易理解</li>
<li>但没有这个方法容易理解</li>
<li>但没有这个方法容易理解</li>
<li>但没有这个方法容易理解</li>
<li>但没有这个方法容易理解</li>
<li>但没有这个方法容易理解</li>
<li>但没有这个方法容易理解</li>
</ul>
</div>
</div> <script type="text/javascript">
window.onload=function(){ var eleShape = document.getElementById('shape');
// console.log(eleShape)
var eleBox = document.getElementById('box');
// 保证shape元素高度足够
eleShape.style.height = eleBox.scrollHeight + 'px'; var funShape = function () {
var scrollTop = eleBox.scrollTop;
// 滚动偏移应用在shape-outside上
var shapeOutside = 'polygon(0 0, 0 '+ (150 + scrollTop) +'px, 16px '+ (154 + scrollTop) +'px, 30px '+ (166 + scrollTop) +'px, 30px '+ (314 + scrollTop) +'px, 16px '+ (326 + scrollTop) +'px, 0 '+ (330 + scrollTop) +'px, 0 0)';
eleShape.style.shapeOutside = shapeOutside;
};
// 滚动时候实时改变shape形状
eleBox.addEventListener('scroll', funShape);
funShape();
}
</script>
</body>
</html>
最新文章
- sql查询慢优化
- Blocks的实现
- java多线程编程(二创建线程)
- android操作sdcard中的多媒体文件(二)——音乐列表的更新
- 版本控制器 (Svn,Git)
- oracle 子查询因子化 浅谈(with的使用)
- BZOJ 1051: [HAOI2006]受欢迎的牛 强连通缩点
- Android 一个Activity保存它自己的实例
- php设计模式之迭代器模式
- java实现的简单词法分析器
- English Vocabulary
- JAVA处理Blob大对象
- 洛谷 P1903 [国家集训队]数颜色 / 维护队列
- 网络编程 生产者消费者模型 GiL
- Metadata in HTML
- day14--前端HTML、CSS
- Python 字典 fromkeys()方法
- git 问题解决办法
- PyQt5--QColorDiaglog
- Unable to create new web application