<!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. asp.net mvc4 controller

    controller返回几种返回结果

  2. Linux使用笔记: 使用Samba访问windows的共享目录(转载)

    转自:http://easwy.com/blog/archives/mount-a-windows-shared-folder-on-linux-with-samba/ 通常我们使用Samba都是在W ...

  3. Swift4 函数, 元组, 运算符

    创建: 2018/02/19 完成: 2018/02/19 更新: 2018/02/25 修改标题 [Swift4 函数] -> [Swift4 函数, 元组, 运算符] 更新 :2018/03 ...

  4. poj 3243 Clever Y && 1467: Pku3243 clever Y【扩展BSGS】

    扩展BSGS的板子 对于gcd(a,p)>1的情况 即扩展BSGS 把式子变成等式的形式: \( a^x+yp=b \) 设 \( g=gcd(a,p) \) 那么两边同时除以g就会变成: \( ...

  5. [App Store Connect帮助]七、在 App Store 上发行（2.1）设定价格与销售范围：为您的 App 设定价格

    在您提交 App 以供审核之前,您必须为您的 App 设定一个价格,该价格将用于 App Store 的所有地区.如果您没有<付费应用程序协议>,则只能选择免费. 必要职能:“帐户持有人” ...

  6. springboot(八) 嵌入式Servlet容器自动配置原理和容器启动原理

    1.嵌入式Servlet容器自动配置原理 1.1 在spring-boot-autoconfigure-1.5.9.RELEASE.jar => springboot自动配置依赖 jar包下,E ...

  7. 转载：4412环境搭建：arm-linux-gcc: 没有那个文件或目录

    4412环境搭建:arm-linux-gcc: 没有那个文件或目录 2014年10月15日 ⁄ 环境搭建 ⁄ 共 993字 ⁄ 字号 小 中 大 ⁄ 评论 11 条 ⁄ 阅读 6,125 次 最近弄了 ...

  8. 进击的Python【第十四章】：Web前端基础之Javascript

    进击的Python[第十四章]:Web前端基础之Javascript 一.javascript是什么 JavaScript 是一种轻量级的编程语言. JavaScript 是可插入 HTML 页面的编 ...

  9. jmeter（一）工具介绍（二）

    1.Jmeter 概要描叙 jmeter 是一款专门用于功能测试和压力测试的轻量级测试开发平台.多数情况下是用作压力测试,该测试工具在阿里巴巴有着广泛的使用,估计是不要钱吧,哈哈,功能上来说,整个平台 ...

  10. joda日期格式转换

    public static String parseDateTime(String date,String formatFrom,String formatTo){ DateTimeFormatter ...