此插件运用简单,只需引入核心core_plugin.js插件 即可自己根据demo部分的 custorm_effect.js里面的内容,去自己定义动画效果。此插件基于jquery和easing的支持,请注意demo里面的文件引入顺序。
整个自定义动画部分,以下一块是核心定义部分,其中onComplete回调接口可以提供给你继续定义其他动画和操作,让你灵活创建出连贯的一系列动画效果
欢迎下载,此插件已经运用到开发项目中,目前测试无bug存在,如果发现问题,欢迎提出。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | ( function ($) { "use strict" ; var isOn = 0, sets, fx, toAnimate = "#effect" , settings = { animation: 8, //动画方式 从1-15 每个数字代表一个动画 请自测效果 animationType: "in" , //显示方式 in 和out 参数,in代表入场,out代表出场 backwards: false , //改变动画显示方向,默认false 设为true 动画将从后往前倒序播放 easing: "easeOutQuint" , speed: 1000, //动画帧速 即在指定时间内完成动画 sequenceDelay: 100, //场景延迟 即执行完上一个动画后,等待指定时间继续执行下一动画 startDelay: 0, //开始延迟,即执行当前动画时,等待指定时间后再开始 offsetX: 100, //动画元素 x坐标偏移量 offsetY: 50, //动画元素 Y坐标偏移量 onComplete: doThis, //回调函数 即 执行完动画后,需要执行的回调方法 restoreHTML: true //重置元素 即重复播放两次该动画 类似于此效果 默认true }; }) |
特别申明:
本站所有资源都是由网友投稿发布,或转载各大下载站,请自行检测软件的完整性!
本站所有资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!
如有侵权请联系我们删除下架,联系方式:lei1294551502@163.com