摘要：公司接了一个当下很火热的，网上有各种模板和造好轮子付费使用的滑动广告的项目。其中核心方法是，笔者猜测方法里应该是先取出本里的所有类名含有的元素，运用的方法取出动画的三个属性值，然后加上以触发动画。
公司接了一个当下很火热的，网上有各种模板和造好轮子付费使用的滑动广告的项目。
网上的模板大部分类似于PPT，而且文字量很大，大部分都是文字的淡入/淡出效果，想做一个稍微复杂点的。
研究了一下，采用了swiper.js+animate.css的方案，而swiper.js的官网上正好有Swiper Animate这个小插件，支持在Swiper内快速制作CSS3动画效果，完美！
研究了一下官网提供的示例（http://www.swiper.com.cn/usag...），其核心是，在slide内的元素的类名加上"ani"，然后加入几个动画的属性值，然后提供两个方法swiperAnimateCache()和swiperAnimate()，供swiper初始化和页数滑动是触发动画。其中核心方法是swiperAnimate()，笔者猜测方法里应该是先取出本slide里的所有类名含有"ani"的元素，运用jq的data方法取出动画的三个属性值，然后加上以触发css3动画。
由于整个项目的所有图片+音乐加一起总共有6M之大，所以必须要加入loading动画才行。去github上搜到了imagesloaded这个库，功能很强大，可以监测img标签的载入，也能监测div的背景图片的载入，用JQ选择所有的图片类，加入一个imagesLoaded方法就搞定了。
问题出现了，由于之前的swiper类是加载完成就直接开始播放动画，所以在loading隐藏后，首页的动画就播放的差不多了，怎么样让swiper知道在loading完后再播放动画呢？
示例中提供的swiperAnimate()的方法中有一个swiper参数，console.log出来后发现跟swiper实例本身包含的方法和属性相似，所以写出代码
mySwiper.Init = function () {
swiperAnimate(this);
};
将动画播放代码独立成一个函数，在初始化时不执行，在loading结束后执行。
这样写完后发现动画还是照旧，然后发现首次进入页面，依然会触发一次onSlideChangeEnd事件，所以加入判断，如果非第一次进入第一页，且页数不为1时，触发动画，任务完成！
多设备的匹配，一开始采用的是flexible方案，这是之前的程序员留给我的方案，我之前没有仔细思考过实现，就按照他的方法使用了下来，后来发现在各种设备上呈现的效果千奇百怪。然后去翻了flexible的文档，发现其大概是一种仿vw的实现方式，就是监测当前设备的宽度，然后除以10，写在body的font-size属性里，这样就可以用rem模仿vw使用了。这种匹配方式用在web app里是合适的，里面有合适的文档流和浮动可以很方便的完成效果，对比例的要求也不高。可是在本项目中，需要适配的是一张张铺满全屏的图片。研究了一会MDN后，我把所有图片的background-size属性改为100% 100%填充满DIV，然后$(".swiper-container").css({"width": document.body.clientWidth, "height": document.body.clientHeight})将div铺满屏幕，后面的定位通过百分比完成，完成了多设备的适配工作，这样做的缺点是在大屏环境下，如PAD，PC端会铺满窗口，很丑，不过这次的应用场景主要是微信端，还做了微信登录验证，所以就忽略了。
最后是一个小bug，swiper虽然铺满了屏幕，可是右边会留下一条白边，如果往右拉是能看到白边的，我通过hammer.js取消了panleft和panright的动作，解决了这一问题。
当初给自己的时间是2天，结果因为需求变动和各种各样的原因，整个项目花了五天时间才完成并部署上线，中间学到了很多，特此写下心得，供以后的自己参考。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/91249.html
摘要：公司接了一个当下很火热的，网上有各种模板和造好轮子付费使用的滑动广告的项目。其中核心方法是，笔者猜测方法里应该是先取出本里的所有类名含有的元素，运用的方法取出动画的三个属性值，然后加上以触发动画。 公司接了一个当下很火热的，网上有各种模板和造好轮子付费使用的滑动广告的项目。网上的模板大部分类似于PPT，而且文字量很大，大部分都是文字的淡入/淡出效果，想做一个稍微复杂点的。 研究了一下，...
摘要：框架下拉刷新控件还能框架化智能又怎么回事二话不多少先上效果图，咱们再来探个究竟。下面通过自定义和嵌套作为内容来解释的智能之处。可以看到在列表已经滚动到中部时，轻微下拉列表是不会触发刷新的，但是如果是触摸固定的布局，则可以触发下拉。 框架？下拉刷新控件还能框架化？智能又怎么回事？二话不多少先上Demo效果图，咱们再来探个究竟。 Github 传送门注意：本文仅仅是博客文章，主要用于项目介...
阅读 875·2021-11-16 11:45
阅读 2104·2021-10-09 09:44
阅读 1319·2019-08-30 14:03
阅读 1076·2019-08-26 18:28
阅读 3309·2019-08-26 13:50
阅读 1692·2019-08-23 18:38
阅读 3439·2019-08-23 18:22
阅读 3559·2019-08-23 15:27
