解决移动端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编写提供，如需学习更多相关知识可移步前往。