資訊專欄INFORMATION COLUMN
- 1
- 1
- 1
- 1
- 1
- 1
- 1
- 1
一個小demo，可以看到，第一個li放大后，仍然是垂直居中，且沒有被外層滑動盒子的overflow：auto屬性給影響到的（實質上這是因為flex布局+不限定高度來實現的）；如圖
，另外，如果你需要所有li底部對齊，則需要給放大的那個盒子加上transfrom屬性，數值大小視情況而定，并且還要對滑動盒子或者ul加上一個padding屬性，以便留出位移空間從而保證位移的li能夠顯示完全。
那么這樣的樣式適用于哪種場景呢?
其實這就是一個焦點放大特效的一個變形。當然，有很多類似特效的實現方式是在滑動盒子上加一層蒙版，或者其他的處理方式，但是不能解決放大后內容超出部分的顯示處理，然后將焦點圖放到蒙版中，如swiper插件的第39個demo：
雙擊放大前，
雙擊放大后
一對比就知道之間的區別在哪里了，這個小demo適用于左右滑動+點擊放大的需求效果。
寫出來分享給大家，希望對有需要的童鞋提供一點幫助
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/51007.html
ul, li { margin: 0; padding: 0; } div{ width: 500px; height: auto; display: flex; ...
摘要：前端最基礎的就是。默認構建一個真實的設置為一個理想值追加到樹中獲取理想值和實際值的比例計算值進行比例換算移動端適配方案前端培訓初級階段之移動端適配原理參考文獻淘寶彈性布局方案實踐布局詳解移動端自適應方案 前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門，但也僅僅是入門，現在前端開發的定義已經遠遠不止這些。前端小課堂（HTML/CSS/JS），本著提升技...
摘要：前端最基礎的就是。默認構建一個真實的設置為一個理想值追加到樹中獲取理想值和實際值的比例計算值進行比例換算移動端適配方案前端培訓初級階段之移動端適配原理參考文獻淘寶彈性布局方案實踐布局詳解移動端自適應方案 前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門，但也僅僅是入門，現在前端開發的定義已經遠遠不止這些。前端小課堂（HTML/CSS/JS），本著提升技...
摘要：前端最基礎的就是。默認構建一個真實的設置為一個理想值追加到樹中獲取理想值和實際值的比例計算值進行比例換算移動端適配方案前端培訓初級階段之移動端適配原理參考文獻淘寶彈性布局方案實踐布局詳解移動端自適應方案 前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門，但也僅僅是入門，現在前端開發的定義已經遠遠不止這些。前端小課堂（HTML/CSS/JS），本著提升技...
摘要：隨著移動互聯網的發展，移動已經逐漸成為互聯網的主要入口，隨之而來的是前端在移動開發上面臨的各種機遇與挑戰，本文就一些常見移動端問題對移動開發需要注意的事項進行一下總結，必然不可能涉及方方面面，但會隨著筆者的積累持續更新。 隨著移動互聯網的發展，移動Web已經逐漸成為互聯網的主要入口，隨之而來的是前端在移動Web開發上面臨的各種機遇與挑戰，本文就一些常見移動端問題對移動Web開發需要注意...
閱讀 828·2023-04-25 19:40
閱讀 3488·2023-04-25 17:41
閱讀 3003·2021-11-11 11:01
閱讀 2612·2019-08-30 15:55
閱讀 3227·2019-08-30 15:44
閱讀 1358·2019-08-29 14:07
閱讀 484·2019-08-29 11:23
閱讀 1326·2019-08-27 10:54
