Swiper常用于移动端网站的内容触摸滑动

Swiper是纯javascript打造的滑动特效插件,面向手机、平板电脑等移动终端。

使用方法:

引入文件

 <link rel="stylesheet" href="path/to/swiper.min.css">
<script src="path/to/swiper.min.js"></script>

Swiper Animate使用方法

1. 使用Swiper Animate需要先加载swiper.animate.min.jsanimate.min.css

2. 初始化时隐藏元素并在需要的时刻开始动画。

var mySwiper = new Swiper ('.swiper-container', {
  onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit
    swiperAnimateCache(swiper); //隐藏动画元素 
    swiperAnimate(swiper); //初始化完成开始动画
  }, 
  onSlideChangeEnd: function(swiper){ 
    swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
  } 
  })

3. 在需要运动的元素上面增加类名 ani ,和其他的类似插件相同,Swiper Animate需要指定几个参数:

swiper-animate-effect:切换效果,例如fadeInUp
swiper-animate-duration:可选,动画持续时间(单位秒),例如 0.5s
swiper-animate-delay:可选,动画延迟时间(单位秒),例如 0.3s

<div class="swiper-slide">
<p class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">内容</p>
</div>

利用swiper.animate写了两个微信小场景。

https://github.com/luoxiaowei/weixin/tree/master

优质内容筛选与推荐>>
1、C++ PAT乙 1080. MOOC期终成绩 (25)
2、beego的orm ,用的数据库sqlite3
3、Html5+Lufylegend.js游戏开发(一)引擎介绍及原理
4、为啥越花钱的人越有钱,越舍不得花钱的人越贫穷
5、spring boot +maven+ thymeleaf+mysql 第一个spring boot实例总结


长按二维码向我转账

受苹果公司新规定影响,微信 iOS 版的赞赏功能被关闭,可通过二维码转账支持公众号。

    阅读
    好看
    已推荐到看一看
    你的朋友可以在“发现”-“看一看”看到你认为好看的文章。
    已取消,“好看”想法已同步删除
    已推荐到看一看 和朋友分享想法
    最多200字,当前共 发送

    已发送

    朋友将在看一看看到

    确定
    分享你的想法...
    取消

    分享想法到看一看

    确定
    最多200字,当前共

    发送中

    网络异常,请稍后重试

    微信扫一扫
    关注该公众号





    联系我们

    欢迎来到TinyMind。

    关于TinyMind的内容或商务合作、网站建议,举报不良信息等均可联系我们。

    TinyMind客服邮箱:support@tinymind.net.cn