Velocity.js实现动画序列的三种方法
来源:互联网 发布:医学论文造假 知乎 编辑:程序博客网 时间:2024/04/29 04:40
Velocity.js实现动画序列的三种方法
velocity.js该插件兼容IE8和Android 2.3(兼容性非常好)
用velocity.js插件实现动画序列所需要用到的js库有:
jquery.js 、 velocity.min.js 、 velocity.ui.min.js
在利用velocity.js插件制作动画序列时,需要同时引入这三个库文件。
第一种方法:
index.html代码:
velocity.js代码:
Id为div1的盒子,定义动画内容为,宽度变化为400px,动画持续时间为1000ms。
在id=div1的盒子的动画执行完成之后,开始执行id=div2的盒子的动画,动画内容与div1盒子的动画相同,都是宽度的变化。
如果想让他们同时动画,则需分开定义:
方法一代码复用率不高。
方法二:定义动画序列
这样就增加了代码的复用性
方法三:当鼠标移入到div1盒子上时,盒子左右晃动
callout.shake是velocity.js预定义的动画,可以直接调用
自定义动画:鼠标移入,div盒子有脉动的效果
注:RegisterEffect 与 RegisterUI 的效果差不多
自定义的动画,一次定义多次使用。
0 0
- Velocity.js实现动画序列的三种方法
- Velocity.js介绍 --js 动画实现
- js实现动画的方法
- Velocity.js动画插件
- velocity.js 动画插件
- Unity 图片序列帧动画的三种方法(个人总结,若有其它方法欢迎交流)
- Velocity制作动画序列学习笔记
- js实现图片旋转的三种方法
- 瀑布流实现的三种方法js jq css3
- 序列化对象的三种方法
- C# 的三种序列化方法
- C# 的三种序列化方法
- C# 的三种序列化方法
- C# 的三种序列化方法
- C# 的三种序列化方法
- C# 的三种序列化方法
- C# 的三种序列化方法
- C# 的三种序列化方法
- 打印流(printStream)
- vs 2008的相关插件
- 格雷码
- 简述malloc和free实现原理
- Android中this、super的区别
- Velocity.js实现动画序列的三种方法
- [POI2000] 最长公共子串
- MATLAB中的sort函数
- Cocos2dx引擎笔记——内存优化
- Java中方法用final修饰参数的作用
- easyui 布局
- 在苹果电脑上安装 Qt 5.2
- [Ahoi2013]差异
- 2015年秋季腾讯校园招聘开发岗笔试题二