在Swiper内如何制作CSS3动画效果示例代码


Posted in Javascript onDecember 07, 2017

前言

Swiper 是一款免费以及轻量级的移动设备触控滑块的框架,使用硬件加速过渡(如果该设备支持的话)。主要使用与移动端的网站、网页应用程序(web apps),以及原生的应用程序(native apps)。主要是为IOS而设计的,同时,在Android、WP8系统以及现代桌面浏览器也有着良好的用户体验。

本文主要给大家介绍了关于Swiper内制作CSS3动画效果的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧。

1、在需要添加动画的页面里面引入以下几个文件 版本对应

<script src="../js/swiper.min.js"></script>
<script src="../js/swiper.animate.min.js"></script>
//**这里引入jquery或者zepto.js都可以**//
<script src="../js/jquery-1.9.1.js"></script>
<link rel="stylesheet" href="../css/animate.min.css" rel="external nofollow" >

2、接着在页面js部分添加(按业务需求)

var mySwiper = new Swiper('.swiper-container',{
   autoplay : 5000,//自动切换时间
   pagination : '.swiper-pagination',
   //pagination : '#swiper-pagination1',
   onInit: function(swiper) {//轮播初始化时候执行动画
    swiperAnimateCache(swiper);
    swiperAnimate(swiper);
   },  
   onSlideChangeEnd: function(swiper) {//轮播切换到最后一张的时候重新执行
    swiperAnimate(swiper);
   }
  })

3、在需要执行的动画的元素上面添加class:

  给需要执行动画的元素上添加class ("ani"、"animated") 

  然后可以添加animate.css里面提供的一些动画

  如果animate.css里面的动画不能满足需求 也可以自定义一些动画

  直接在执行动画的元素对应的css里面添加自定义的动画样式

  还可以在元素上面配置一下几个参数

  swiper-animate-effect:切换效果,例如 fadeInUp 

  swiper-animate-duration:可选,动画持续时间(单位秒),例如 0.5s

  swiper-animate-delay:可选,动画延迟时间(单位秒),例如 0.3s

4、下面是案例

在Swiper内如何制作CSS3动画效果示例代码

参考链接:http://www.swiper.com.cn/usage/animate/index.html

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
DB.ASP 用Javascript写ASP很灵活很好用很easy
Jul 31 Javascript
js修改table中Td的值(定义td的双击事件)
Jan 10 Javascript
jquery网页回到顶部效果(图标渐隐,自写)
Jun 16 Javascript
jQuery中[attribute^=value]选择器用法实例
Dec 31 Javascript
Javascript中call和apply函数的比较和使用实例
Feb 03 Javascript
浅谈jquery事件处理
Apr 24 Javascript
js 连续赋值的简单实现
Jun 13 Javascript
JavaScript中数组的22种方法必学(推荐)
Jul 20 Javascript
JavaScript中数据类型转换总结
Dec 25 Javascript
JS中Safari浏览器中的Date
Jul 17 Javascript
详解动画插件wow.js的使用方法
Sep 13 Javascript
JavaScript和TypeScript中的void的具体使用
Sep 12 Javascript
微信小程序wx.previewImage预览图片实例详解
Dec 07 #Javascript
关于JavaScript语句后面的分号问题
Dec 07 #Javascript
微信小程序获取手机系统信息的方法【附源码下载】
Dec 07 #Javascript
微信小程序实现打开内置地图功能【附源码下载】
Dec 07 #Javascript
js实现关闭网页出现是否离开提示
Dec 07 #Javascript
JavaScrip关于创建常量的知识点
Dec 07 #Javascript
浅谈vue自定义全局组件并通过全局方法 Vue.use() 使用该组件
Dec 07 #Javascript
You might like
PHP入门学习的几个不错的实例代码
2008/07/13 PHP
关于PHP实现异步操作的研究
2013/02/03 PHP
一个基于phpQuery的php通用采集类分享
2014/04/09 PHP
destoon实现调用当前栏目分类及子分类和三级分类的方法
2014/08/21 PHP
ThinkPHP添加更新标签的方法
2014/12/05 PHP
PHP 实现浏览记录并按日期分组
2017/05/11 PHP
关于php支持的协议与封装协议总结(推荐)
2017/11/17 PHP
javascript一些实用技巧小结
2011/03/18 Javascript
禁用Enter键表单自动提交实现代码
2014/05/22 Javascript
jQuery中extend()和fn.extend()方法详解
2015/06/03 Javascript
JS拖拽插件实现步骤
2015/08/03 Javascript
浅谈react 同构之样式直出
2017/11/07 Javascript
如何选择适合你的JavaScript框架
2017/11/20 Javascript
JS中的防抖与节流及作用详解
2019/04/01 Javascript
vue实现百度搜索功能
2020/12/28 Javascript
es6函数之尾递归用法实例分析
2020/04/25 Javascript
[03:17]史诗级大片应援2018DOTA2国际邀请赛 致敬每一位坚守遗迹的勇士
2018/07/20 DOTA
python虚拟环境virualenv的安装与使用
2016/12/18 Python
《与孩子一起学编程》python自测题
2018/05/27 Python
Python列表解析配合if else的方法
2018/06/23 Python
pytorch掉坑记录:model.eval的作用说明
2020/06/23 Python
Cotton On南非:澳洲时尚平价品牌
2018/06/28 全球购物
美国购买体育赛事门票网站:TicketCity
2019/03/06 全球购物
static函数与普通函数有什么区别
2015/12/25 面试题
工作表现评语
2014/01/19 职场文书
食品安全标语
2014/06/07 职场文书
个人欠款协议书范本2014
2014/11/02 职场文书
2014年护士个人工作总结
2014/11/11 职场文书
写给领导的感谢信
2015/01/22 职场文书
西安导游词
2015/02/12 职场文书
2015年乡镇扶贫工作总结
2015/04/08 职场文书
城南旧事读书笔记
2015/06/29 职场文书
如何拟写通知正文?
2019/04/02 职场文书
创业计划书之溜冰场
2019/10/25 职场文书
教你用Python写一个植物大战僵尸小游戏
2021/04/25 Python
laravel添加角色和模糊搜索功能的实现代码
2021/06/22 PHP