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

 

posted @ 2015-04-09 14:25  五叶神  阅读(1455)  评论(0编辑  收藏  举报