<!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. 小程序-demo：小程序示例-page/api

    ylbtech-小程序-demo:小程序示例-page/api 以下将演示小程序接口能力,具体属性参数详见小程序开发文档. 1. page/component返回顶部 1. a) .js Page({ ...

  2. 利用插件（jQuery-ui.js）实现表格行的拖拽排序

    template 模板(html) 首先要引入jQuery-ui.js的文件.import './../../scripts/base/jquery/jquery-ui.min.js';<tab ...

  3. An internal error occurred during: "Launching MVC on Tomcat 6.x". java.lang.NullPointerException

    有的时候打开Myeclispe莫名奇妙的就出现了这样的问题: An internal error occurred during: "Launching MVC on Tomcat  6.x ...

  4. bzoj 3609: [Heoi2014]人人尽说江南好【博弈论】

    参考:https://blog.csdn.net/Izumi_Hanako/article/details/80189596 胜负和操作次数有关,先手胜为奇,所以先手期望奇数后手期望偶数,最后一定能达 ...

  5. bzoj 2756 [SCOI2012]奇怪的游戏【二分+最大流】

    达成成就:为二分调参 !:多次memset的话要把数组大小开严格一点,否则会T 看到网格图,首先黑白染色. 注意到每次操作都是在一个黑格子和一个白格子上进行的,也就是说,最后黑格子数字和白格子数字和的 ...

  6. Survival on the Titanic (泰坦尼克号生存预测)

    >> Score 最近用随机森林玩了 Kaggle 的泰坦尼克号项目,顺便记录一下. Kaggle - Titanic: Machine Learning from Disaster On ...

  7. Jmeter常见问题汇总（不断更新ing）

    1.测试计划中有多个线程组执行时,为了防止线程组间的相互干扰,需要如下设置一下:     2,接口测试中的上传字段为汉字时需要进行什么形式的转码? 方法一:需要把编码复选框勾选,才能正常通过接口查询数 ...

  8. [BZOJ3245]最快路线

    Description 精明的小R每每开车出行总是喜欢走最快路线,而不是最短路线.很明显,每条道路的限速是小R需要考虑的关键问题.不过有一些限速标志丢失了,于是小R将不知道能开多快.不过有一个合理的方 ...

  9. 贪心/思维题 Codeforces Round #310 (Div. 2) C. Case of Matryoshkas

    题目传送门 /* 题意:套娃娃,可以套一个单独的娃娃,或者把最后面的娃娃取出,最后使得0-1-2-...-(n-1),问最少要几步 贪心/思维题:娃娃的状态:取出+套上(2),套上(1), 已套上(0 ...

  10. Struts2 第三个程序 namespacce的用法

    1.创建web项目,添加struts2支持的类库,在web.xml中配置struts2过滤器. 2.创建名为UserAction的Action对象,并分别在其中编写add()和update()方法,用 ...