一个图片滑动组件

2019独角兽企业重金招聘Python工程师标准>>>

项目用到的技术

1. transaction，过度动画
2. translate3d改变z坐标值，来实现图片切换
3. touchStart touchMove touchEnd

用到的基础知识

1. vertical-align 属性设置元素的垂直对齐方式(相对于父元素)
2. display:table-cell实现大小不固定的图片在父元素中垂直居中的效果,但是需要注意ie67不支持

遇到的问题

1. 在设置元素的height元素宽度是屏幕高度的时候,其dom结构是这样的body>div>ul>li>img,img中已经加载了一张宽度为457的图片.设置body的高度为100%,然后却发现未能生效,在这里需要设置body的position属性为absoulte才行,但是为什么,说的很模糊.这里需要复习一下relative,fixed和absolute的相关知识

• fixed 设置absolute:fixed时,元素以top,left,bottom,right进行定位,而定位的参考对象就是body或者说是浏览器窗口.显而易见的,元素也就脱离了标准文档流
• absolute:以最近的一个设置了position:absolute的祖先元素(不是父元素哦,也可能是爷爷,祖爷爷元素),如果没有这样的元素,那么就以body元素为参照.同样适用top等进行定位.同样也脱离了标准文档流
• relative:举个例子吧.你的视野view中有一艘船boat,船上有一个旗杆,他们的层级结构类似这样view>boat>flag,这样看来,flag相对与boat是绝对定位的,而boat相对于视野view来说是相对定位的,他并脱离标准文档流.为什么要这么做呢?因为如果你不给boat设置一个absolute属性的话,flag是没法相对它的整个父元素定位的,它可能相对爷爷元素设置是body定位,所有你必须得给父元素设置position属性,于是就只能是relative了.

2. 现在说1中的问题.在html5中,body和html也是块状元素,也是盒子模型.所以其子元素做100%宽度的时候,是以父元素(以1中的规则)为参考的.所以这里需要给html也设置100%的高度或者设置body的position

转载于:https://my.oschina.net/boogoogle/blog/634062