一个图片滑动组件

项目用到的技术

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