Velocity.js初识
Velocity.js官网：http://julian.com/research/velocity/
兼容IE8和Android2.3
Velocity.js基本用法
效果图：
CSS
.box{
width:100px;
height:100px;
background-color:pink;
}
JS
(function($){
$('#div1').velocity({
width: '300px',
height: '300px'
},{
duration:3000 //动画的时长
});
})(jQuery);
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset=utf8 />
<title>velocity基本用法</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/velocity.min.js"></script>
<script type="text/javascript" src="js/velocity.ui.min.js"></script> </head>
<body>
<div id="div1" class="box"></div>
<script type="text/javascript" src="js/script1.js"></script>
</body>
</html>
制作动画序列的三种方法
效果图：
CSS
.box{
width:100px;
height:100px;
background-color:pink;
}
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset=utf8 />
<title>制作序列动画</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/velocity.min.js"></script>
<script type="text/javascript" src="js/velocity.ui.min.js"></script> </head>
<body>
<div id="div1" class="box"></div>
<div id="div2" class="box"></div>
<script type="text/javascript" src="js/script1.js"></script>
</body>
</html>
JS
方法一：
(function($){
$('#div1').velocity({
width: '300px'
},{
duration:3000
});
$('#div2').velocity({
width: '300px'
},{
duration:3000,
delay:3000 //动画的延迟时间
});
$('#div3').velocity({
width: '300px'
},{
duration:3000,
delay:6000
});
})(jQuery);
方法二：
(function($){
$('#div1').velocity({
width:'300px'
},{
duration:3000,
complete:function(){
$('#div2').velocity({
width:'300px'
},{
duration:3000,
complete:function(){
$('#div3').velocity({
width:'300px'
},{
duration:3000
});
}
});
}
});
})(jQuery);
方法三：
(function($){
var seq = [
{
elements:$('#div1'),
properties:{width:'300px'},
options:{duration:3000}
},
{
elements:$('#div2'),
properties:{width:'300px'},
options:{duration:3000}
},
{
elements:$('#div3'),
properties:{width:'300px'},
options:{duration:3000}
}
];
$.Velocity.RunSequence(seq);
})(jQuery);
效果图：
预定义动画
(function($){
$('#div1').on('mouseover',function(){
$(this).velocity('callout.shake');
});
})(jQuery);
//callout.shake:Velocity预定义动画
更多预定义方法：http://julian.com/research/velocity/
效果图：
自定义动画
(function($){
$.Velocity.RegisterUI('HS.pulse',{ //用RegisterUI这个函数定义一个动画(也可用RegisterEffect来定义，效果一样)
defaultDuration:3000, //动画时间
calls:[
[{scaleX:1.5},0.5], //scaleX：动画在X轴的比例变化
[{scaleX:1.0},0.5] //0.5是动画时间所占用的百分比
]
});
$('#div2').on('mouseover',function(){
$(this).velocity('HS.pulse');
});
})(jQuery);
Velocity.js初识的更多相关文章
- velocity.js用法整理1
velocity.js 此框架相对于JQ的运动算法, 有很大的优势. 例如,A和B两个元素,position:absolute; top:0; 现在让A元素用JQ的animate,B用velocit ...
- JQuery动画插件Velocity.js发布：更快的动画切换速度
5月3日,Julian在其GitHub上发布了Velocity.js.Velocity.js是一款动画切换的jQuery插件,它重新实现了jQuery的$.animate()方法从而加快动画切换的速度 ...
- Velocity.js发布：更快的动画切换速度
Velocity.js是一款动画切换的jQuery插件,它重新实现了jQuery的$.animate()方法从而加快动画切换的速度.Velocity.js只有7k的大小,它不仅包含了$.animate ...
- node.js系列笔记之node.js初识《一》
node.js系列笔记之node.js初识<一> 一:环境说明 1.1 Linux系统CentOS 5.8 1.2 nodejs v0.10.15 1.3 nodejs源码下载地址 htt ...
- javascript动画：velocity.js学习
第二章:基础知识 一.velocity和jQuery: Velocity函数是独立于jQuery的,但两者可以结合使用.通常这么做的好处是可以利用jQuery的链式操作:当你先用jQuery选择了一个 ...
- Velocity.js的使用
前面的话 Velocity是一款优秀的JS动画库,完全可以作为jQuery的animate的替代品.需要动画功能时,使用Velocity是一个好选择.本文将详细介绍Velocity.js的使用 概述 ...
- jQuery动画切换引擎插件Velocity.js
Velocity.js 官网 Velocity.js实现弹出式相框 慕课网 极棒的jquery动画切换引擎插件Velocity.js jQ库 (function($){ // 普通调用 /*$('#d ...
- velocity.js 动画插件
1. velocity.js 插件介绍 Velocity 是独立于jQuery的,但两者可以结合使用的动画插件.用法类似 jq 的 animate ,但是支持更高级动画. ( 颜色动画.转换动画(tr ...
- vue中使用js动画与velocity.js
一:vue中使用js动画 根据上一篇安装animate.css之后 vue中有动画的钩子函数,@before-enter是内容由无到有的时候自动监听触发的函数,函数会接收到参数el,这样可以动态设置样 ...
随机推荐
- 如何解决win7系统无法运行cmd命令提示符
如何解决win7系统无法运行cmd命令提示符 CMD命令可以帮助我们很快的执行所需要的程序命令,可以查询系统中很多的信息和解决系统很多的故障,对我们来说非常方便,但是最近有用户反馈自己win7电脑 ...
- Hive记录-Hive常用命令操作
1.hive支持四种数据模型 • external table ---外部表:Hive中的外部表和表很类似,但是其数据不是放在自己表所属的目录中,而是存放到别处,这样的好处是如果你要删除这个外部表,该 ...
- Java Calendar详解
网上看到的一篇,码一下.侵删 一:字段和方法的信息 YEAR 字段: public static final int YEAR ; 指示年的 get 和 set 的字段数字.这是一个特定于日历的值: ...
- C# 实现Bresenham算法（vs2010）
using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...
- UE4联机编译光照
UE4联机编译光照需要SwarmCoordinator以及SwarmAgent,在Engine\Binaries\DotNET目录下. SwarmAgent 我们主要关注Distribution Se ...
- jzoj4313 电话线铺设（最小生成树+最近公共祖先）
题面 \(solution:\) 这道题很奇妙,需要对kruskal重构树有足够的了解!我们先对王牌电缆实行kruskal重构树,然后我们再来枚举每一条李牌电缆,我们将某一条李牌电缆加进这棵树中必然构 ...
- 5、利用两个栈实现队列，完成push和pop操作
题目描述 用两个栈来实现一个队列,完成队列的Push和Pop操作. 队列中的元素为int类型. 思路: 1.一个栈用来做push 2.另一个栈用来做pop 3.将push操作的栈的元素放入另一个栈中, ...
- mysql 原理 ~ sql执行
一 普通sql执行的具体过程1 连接器 管理连接,权限验证2 分析器 词法分析,语法分析 比如 数据表和数据列是否存在, 别名是否有歧义,是否符合标准sql语法等3 优化器检测 执行计划生 ...
- 2018-2019-2 网络对抗技术 20165230 Exp6 信息搜集与漏洞扫描
目录 1.实验内容 2.实验过程 任务一:各种搜索技巧的应用 通过搜索引擎进行信息搜集 搜索网址目录结构 使用IP路由侦查工具traceroute 搜索特定类型的文件 任务二:DNS IP注册信息的查 ...
- 教你如何使用android studio发布release 版本【转】
原文链接 想必还有人对如何在Android studio (以下简称as)发布release版本的app而狂刷百度吧?都是过来人,我很理解这种心情,百度到的基本是半成品,为什么这么说呢?百度一下,你就 ...