解決移動端H5海報滑動插件適應大部分手機問題 手機端高度自適應

Html5微信端滑屏海報在各類尺寸的手機上總會有這樣那樣的問題，通過屢次製做總結出來一些當心得，分享下。

我使用的是jquery插件swiper.min.js，動畫能夠利用animate.css，若是本身能夠，也能夠寫一些簡單的動畫效果。

html代碼以下：

swiper-slide是沒屏的滑塊，不須要切圖作動畫的做爲其背景圖片（background-size設爲cover），須要動畫的圖片在section內，data-anim爲試下寫好的動畫的class樣式，data-top爲原圖中動畫元素距滑塊中心線的距離，anim-delay爲咱們自定義的動畫延遲時間。

下面咱們添加js控制動畫及其位置：

調用咱們量取的距中心線的data-top適應其在不一樣寬度的客戶端距中間的位置一致。

 

在swiper的onSlideChangeEnd事件中添加滑動時移除添加animate class作到上下滑動都會出現動畫。

這樣就OK了，切圖量小，除了須要動畫的塊切出來外其餘均可以做爲背景圖片，不須要把因此的元素都浮起來作等比縮放。惟一美中不足的是在手機比例很矮的老手機上瀏覽時（比方iPhone4就很短），因爲高度很矮，上下會截掉一部分，因此但願設計圖每塊能少放些內容，上下放些可有可無能夠截的內容。目前我用的是@media(max-height:461px){}作一些微調。（此問題解決會在這裏補充，若有更好的方法或者問題請在下方留言）

具體demo能夠參考http://www.hishop.com.cn/wx/himeiniang

本文由http://www.rswebun.com編寫提供，如需學習更多相關知識可移步前往。