課程
/前端開發
/JavaScript
/JS+CSS3實現帶預覽圖幻燈片效果
為什么要先top 50%,然后-1*pictures[i].clientHeight/2)+'px'就算居中了呢?
不是可以用transform的translate()來進行設置嘛?
2015-06-16
源自:JS+CSS3實現帶預覽圖幻燈片效果 3-2
正在回答
top 50%,先使圖片的上邊據處于父元素(容器)的中線位置,在通過js計算自身高度的一半,設置給margin-top.將圖片向上提升自己高度的一半.即自身中線與父元素中線對齊.translate()不知道要傳入多少值.再者translate變換后有點position:relative的味道,會使原先占用的布局(位置)保持不變,會對下面元素排版,照成一定的美觀影響.而margin設置后,下面的文本等內容會隨之而變.
桂花糕 提問者
啊,感謝說明,看視頻沒轉過彎來,看了你說明就懂了!
舉報
同樣的幻燈片,不一樣的切換,學會實現思路,操作很簡單
4 回答圖片顯示問題
3 回答那個圖片是如何實現居中的?
3 回答圖片垂直居中時,獲取到的圖片高度大于圖片的實際高度
4 回答加入“main_background”圖片展示樣式失效 無圖片顯示
2 回答預覽圖片沒有顯示
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網安備11010802030151號
購課補貼聯系客服咨詢優惠詳情
慕課網APP您的移動學習伙伴
掃描二維碼關注慕課網微信公眾號
2015-06-18
top 50%,先使圖片的上邊據處于父元素(容器)的中線位置,在通過js計算自身高度的一半,設置給margin-top.將圖片向上提升自己高度的一半.即自身中線與父元素中線對齊.translate()不知道要傳入多少值.再者translate變換后有點position:relative的味道,會使原先占用的布局(位置)保持不變,會對下面元素排版,照成一定的美觀影響.而margin設置后,下面的文本等內容會隨之而變.
2015-11-29
啊,感謝說明,看視頻沒轉過彎來,看了你說明就懂了!