<!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. 8 个很有用的 jQuery 技巧(转)

    http://www.oschina.net/question/12_145472 一个基于web的标签设计,打印工具,超diao http://www.oschina.net/question/17 ...

  2. rm -rf 的“幸存者”

    原文:http://blog.jobbole.com/70971/ 以 root 用户执行 rm –rf / 命令,然后观察下哪些文件或者指令会幸存下来.结果是什么也没少!因此你必须增加 —no-pr ...

  3. Linux系统挂载NTFS文件系统(转载)

    转自:http://hermesbox.blogbus.com/logs/47386987.html 今天尝试并成功的将一块500G的移动硬盘挂载到了RHEL5的系统上,甚感欣慰.想到也许以后自己或其 ...

  4. linux中的C里面使用pthread_mutex_t锁（转载）

    转自:http://blog.csdn.net/w397090770/article/details/7264315 linux下为了多线程同步,通常用到锁的概念. posix下抽象了一个锁类型的结构 ...

  5. 【原创】Elasticsearch无宕机迁移节点

    官方API文档:https://www.elastic.co/guide/en/elasticsearch/reference/current/allocation-filtering.html 参考 ...

  6. bzoj 1096: [ZJOI2007]仓库建设【斜率优化】

    好眼熟啊 直接dp显然很难算,所以设val为只在n点建一个仓库的费用,然后设f[i]为在i~n点建若干仓库并且i点一定建一个仓库的最大省钱数 转移很显然,设s为p的前缀和,f[i]=max{f[j]+ ...

  7. Trie树的小应用——Chemist

    题意(自己编的): 给你一篇文章,包含n个长度为Si的单词,然后给你m组询问,每次询问一个单词在这篇文章中作为单词前缀出现的次数.n <=10^6,m<=10^6,Si<=100. ...

  8. visual studio中使用clrscr程序出错

    clrscr()函数的作用是“清屏”,即把标准输出设备中以前的显示记录清除,包含在头文件#include<conio.h>中,但暂时较旧的编译器中没有这个. 如果想要具有相同作用的函数,可 ...

  9. [ZOJ1610]Count the Colors

    Description 画一些颜色段在一行上,一些较早的颜色就会被后来的颜色覆盖了. 你的任务就是要数出你随后能看到的不同颜色的段的数目. Input 每组测试数据第一行只有一个整数n, 1 < ...

  10. [Usaco2011 Feb]Generic Cow Protests

    Description Farmer John's N (1 <= N <= 100,000) cows are lined up in a row and numbered 1..N. ...