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

iphone X 的适配的更多相关文章

  1. iOS:界面适配--iPhone不同机型适配 6/6plus

    iOS:界面适配--iPhone不同机型适配 6/6plus        机型变化 坐标:表示屏幕物理尺寸大小,坐标变大了,表示机器屏幕尺寸变大了: 像素:表示屏幕图片的大小,跟坐标之间有个对应关系 ...

  2. iOS 11适配和iPhone X的适配

    这两天对自己负责的项目进行iOS 11和iPhone X的适配,网上的博客很多,也看了很多别人的记录博客,这里把自己遇到的问题记录下,当然有些不仅仅是iOS 11和iPhone X的适配,还包括自己遇 ...

  3. [超级懒人最简单法]iPhone 6 plus 适配切图方法分享(转载文章)

    网络上已经有很多适配教程,可是看了半天总是半懂不懂..最后还是要综合多个教程再动动脑子动动手,最好有程序大哥帮你试一下(这得有多大的福气) 如果有跟我一样情况的: 1.       有人说用sketc ...

  4. iOS:界面适配(三)--iPhone不同机型适配 6/6plus 前

    转:http://blog.csdn.net/houseq/article/details/40051207 对于不同苹果设备,各个参数查看<iOS:机型参数.sdk.xcode各版本>. ...

  5. iPhone 6 & iPhone 6 Plus适配

    转载请注明出处: http://www.cnblogs.com/dokaygang128/p/4049461.html Apple 今年发布了两款新的iPhone机器,iPhone 6 和iPhone ...

  6. iPhone不同机型适配 6/6plus －－备用

     机型变化 坐标:表示屏幕物理尺寸大小,坐标变大了,表示机器屏幕尺寸变大了: 像素:表示屏幕图片的大小,跟坐标之间有个对应关系,比如1:1或1:2等: ppi:代表屏幕物理大小到图片大小的比例值,如果 ...

  7. iphone开发之适配iphone5

    iphone5出来了,从不用适配的我们也要像android一样适配不同分辨率的屏幕了.   公司产品新版本需要适配iphone5,经过一番折腾算是搞定了.下面分享给大家:   iphone5的屏幕分辨 ...

  8. 关于IOS的屏幕适配（iPhone）——资源适配

    IOS的屏幕适配几乎不需要大量的代码操作,更多的时间我们只是动动鼠标选择一下就搞定.可以苹果在这方面做的还是比较人性的,解放了开发者. 首先来说说Iphone这几种屏(由于最近做的是iPhone AP ...

  9. IOS学习——iphone X的适配

    说实话,对于一个刚入门iOS两个月的新手而言,在拿到这个任务的时候整个人都是懵逼的,怎么做适配?哪些地方需要适配?该怎么做?一个个问题搞得头都大了. 首先,啥都不管,先在iPhone X上运行起来看看 ...

  10. IOS开发之--iPhone XR，iPhone XS Max适配

    因为iPhone X和iPhone XS的尺寸比是一样的,只需要把这两张图片补上就行. 具体原理性的东西就多说了,因为iPhoneX系列都一样,本文只说明一下具体怎么做,要适配屏幕,首先得让他以正确的 ...

随机推荐

  1. UI：归档、反归档、数据持久化

    支持的文件读写类型:字符串.数组.字典.NSdata  (可变的.不可变的.共有8个类) 对于数组.字典在写入文件时,其中的元素也必须是以上四种类型之一. 支持的数据类型有限.且简单 写入文件: 字符 ...

  2. 洛谷P3295 [SCOI2016]萌萌哒（倍增+并查集）

    传送门 思路太妙了啊…… 容易才怪想到暴力,把区间内的每一个数字用并查集维护相等,然后设最后总共有$k$个并查集,那么答案就是$9*10^{k-1}$(因为第一位不能为0) 考虑倍增.我们设$f[i] ...

  3. 【OpenJ_Bailian - 2192】Zipper（dfs）

    Zipper Descriptions: Given three strings, you are to determine whether the third string can be forme ...

  4. Pycharm的安装教学

    Python环境搭建—安利Python小白的Python和Pycharm安装详细教程 人生苦短,我用Python.众所周知,Python目前越来越火,学习Python的小伙伴也越来越多.最近看到群里的 ...

  5. Luogu P2858 [USACO06FEB]奶牛零食Treats for the Cows 【区间dp】By cellur925

    题目传送门 做完A Game以后找道区间dp练练手...结果这题没写出来(哭). 和A Game一样的性质,从两边取,但是竟然还有天数,鉴于之前做dp经常在状态中少保存一些东西,所以这次精心设计了状态 ...

  6. [IOI1998]Picture

    Description 在一个平面上放置一些矩形,所有的边都为垂直或水平.每个矩形可以被其它矩形部分或完全遮盖,所有矩形合并成区域的边界周长称为轮廓周长. 要求:计算轮廓周长. 数据规模: 0≤矩形数 ...

  7. 题解报告：Luogu P3368 【模板】树状数组 2（区间修改，单点查询）

    题目描述 如题,已知一个数列,你需要进行下面两种操作: 1.将某区间每一个数数加上x 2.求出某一个数的和 输入输出格式 输入格式: 第一行包含两个整数N.M,分别表示该数列数字的个数和操作的总个数. ...

  8. 选择排序 分类： 算法 c/c++ 2014-10-10 20:32 509人阅读 评论(0) 收藏

    选择排序(假设递增排序) 每次选取从当前结点到末尾结点中最小的一个与当前结点交换,每一轮固定一个元素位置. 时间复杂度O(n^2),空间复杂度O(1).下面的示例代码以带头结点的链表为存储结构: #i ...

  9. 窗口Dialog

    Dialog是窗口的意思,它是Window的子类.与frame相比,frame是我们大的窗口,而dialog便是那种弹出来和你说话的对话框. Dialog类的默认布局是BorderLayout Dia ...

  10. Radis

    http://www.redis.cn/ http://try.redis.io/ http://www.redisdoc.com/en/latest/ Redis 命令参考¶ 本文档是 Redis ...