<!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. 关于spring cloud eureka整合ribbon实现客户端的负载均衡

    1. 实现eureka整合ribbon非常简单, 1.1.首先引入所需maven依赖 <dependency> <groupId>org.springframework.boo ...

  2. win10系统安装loadrunner11提示“为了对电脑进行保护 已经阻止此应用”的解决方案

    在执行loadrunner安装包中的setup.exe时会有如下提示: 解决方法:点击Win+R快捷键打开运行,输入“ gpedit.msc”按下回车键打开组策略编辑: 在左边选择[计算机配置]→[W ...

  3. bzoj 1922: [Sdoi2010]大陆争霸【dijskstra】

    d[u]为u被几个节点保护,d1[u]为最早到u的时间,d2[u]为u的最早可进入时间(保护点都被打下来了的时候),然后最终最早进入时间就是max(d1[u],d2[u]),把这个作为权值放进小根堆, ...

  4. （3）css文本样式

    本篇学习资料主要讲解: 如何用css 的样式定义方法来介绍文字的使用. 第(1)节:用css设置文本样式.                       一.弄懂文本文字的制作.利用css的样式定义版面 ...

  5. apicloud运行机制

    1 首先在官网apicloud中,创建项目生成config.xml文件,预设风格. 2 将config.xml文件放在项目跟目录中,Vue项目,必须先打包生产dist文件, 3 本地或者云编译(官方工 ...

  6. Spring的事务传播性与隔离级别以及实现事物回滚

    一.事务的四个特性(ACID) 原子性(Atomicity):一个事务中所有对数据库的操作是一个不可分割的操作序列,要么全做,要么全部做. 一致性(Consistency): 数据不会因为事务的执行而 ...

  7. win7/8系统中php5.3和5.4、5.5不能加载php_curl.dll解决办法

    win7/8系统中php5.3和5.4.5.5不能加载php_curl.dll解决办法   作者:用户 来源:互联网 时间:2016-06-23 18:54:33 php变量注释系统模块 摘要: 本文 ...

  8. [SDOI2016]墙上的句子

    题目描述 考古学家发现了一堵写有未知语言的白色墙壁,上面有一个n行m列的格子,其中有些格子内被填入了某个A至Z的大写字母,还有些格子是空白的. 一直横着或竖着的连续若干个字母会形成一个单词,且每一行的 ...

  9. 关于flex布局对自己的影响

    对于本图来说用了一个效果就能达到这种情况,对于我来说,今天是有进步的,具体操作就是盒子模型确实,在什么地方起来的flex就运用到该地方去,刚 开始就一直有问题,思考了半天,原来是我的控制代码出现了点错 ...

  10. sh/bash/csh/Tcsh/ksh/pdksh等shell本质区别

    sh/bash/csh/Tcsh/ksh/pdksh等shell本质区别 1. Shell脚本的书写 在写Shell脚本时,往往第一行要注明用什么解释器来解释这个脚本. 如#!/bin/bash即用/ ...