一個圖片滑動組件

項目用到的技術

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