在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 相关文章推荐
jquery.ui.draggable中文文档
Nov 24 Javascript
编写可维护面向对象的JavaScript代码[翻译]
Feb 12 Javascript
学习JavaScript的最佳方法分享
Oct 21 Javascript
jQuery中JSONP的两种实现方式详解
Sep 26 Javascript
详解vue-cli + webpack 多页面实例应用
Apr 25 Javascript
浅谈Webpack自动化构建实践指南
Dec 18 Javascript
解决layui中的form表单与button的点击事件冲突问题
Aug 15 Javascript
微信小程序map组件结合高德地图API实现wx.chooseLocation功能示例
Jan 23 Javascript
在vue项目中使用Jquery-contextmenu插件的步骤讲解
Jan 27 jQuery
详解vue 不同环境配置不同的打包命令
Apr 07 Javascript
vue.js自定义组件实现v-model双向数据绑定的示例代码
Jan 08 Javascript
react使用antd表单赋值,用于修改弹框的操作
Oct 29 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
PHP5 安装方法
2006/10/09 PHP
PHP ajax 分页类代码
2008/11/13 PHP
phpmyadmin配置文件现在需要绝密的短密码(blowfish_secret)的2种解决方法
2014/05/07 PHP
PHP 错误处理机制
2015/07/06 PHP
解决nginx不支持thinkphp中pathinfo的问题
2015/07/21 PHP
PHP模板引擎Smarty中变量的使用方法示例
2016/04/11 PHP
php之可变变量的实例详解
2017/09/12 PHP
Thinkphp 框架扩展之数据库驱动常用方法小结
2020/04/23 PHP
laravel admin实现分类树/模型树的示例代码
2020/06/10 PHP
动态调用CSS文件的JS代码
2010/07/29 Javascript
JavaScript 的继承
2011/10/01 Javascript
javascript仿php的print_r函数输出json数据
2013/09/13 Javascript
jquery做的一个简单的屏幕锁定提示框
2014/03/26 Javascript
手机号码,密码正则验证
2014/09/04 Javascript
跟我学习javascript的垃圾回收机制与内存管理
2015/11/23 Javascript
JavaScript之DOM_动力节点Java学院整理
2017/07/03 Javascript
jQuery实现简单日期格式化功能示例
2017/09/19 jQuery
Vue仿今日头条实例详解
2018/02/06 Javascript
详解vue-router 命名路由和命名视图
2018/06/01 Javascript
JavaScript函数定义方法实例详解
2019/03/05 Javascript
解决qrcode.js生成二维码时必须定义一个空div的问题
2020/07/09 Javascript
[57:31]DOTA2-DPC中国联赛 正赛 SAG vs CDEC BO3 第一场 2月1日
2021/03/11 DOTA
在python2.7中用numpy.reshape 对图像进行切割的方法
2018/12/05 Python
django-crontab 定时执行任务方法的实现
2019/09/06 Python
np.newaxis 实现为 numpy.ndarray(多维数组)增加一个轴
2019/11/30 Python
Tkinter中复选菜单是否被选中的判断与设置方式
2020/03/04 Python
Python pandas如何向excel添加数据
2020/05/22 Python
python 图像判断,清晰度(明暗),彩色与黑白实例
2020/06/04 Python
金融管理专业求职信
2014/07/10 职场文书
关于读书的活动方案
2014/08/14 职场文书
德能勤绩廉个人总结
2015/02/14 职场文书
大学生学年个人总结
2015/02/15 职场文书
大学开学感言
2015/08/01 职场文书
初二物理教学反思
2016/02/19 职场文书
Java面试题冲刺第十八天--Spring框架3
2021/08/07 面试题
mongodb数据库迁移变更的解决方案
2021/09/04 MongoDB