Mootools 1.2教程(11)——Fx.Morph、Fx选项和Fx事件(2)
作者:Fdream 来源:Fdream博客 时间:2008-12-04 16:03:00
Fx选项(Options)
下面的选项都可以被Fx.Tween和Fx.Morph接受。它们都非常容易实现,而且可以给你非常多的控制权来控制你的效果。要使用这些选项,请使用下面的语法:
参考代码:
// 建立你的渐变或者形变
// 然后在大括号{ }之间设置你的选项
var morphObject = new Fx.Morph(morphElement, {
// 首先是选项的名字
// 然后后面跟一个冒号(:)
// 然后定义你的选项
duration: 'long',
transition: 'sine:in'
});
fps(每秒帧数,frames per second)
这个选项决定了这个动画每秒的帧数。默认值是50,可以接受数字和值为数字的变量。
参考代码:
// 建立你的渐变或者形变
// 然后在大括号{ }之间设置你的选项
var morphObject = new Fx.Morph(morphElement, {
fps: 60
});
// 或者这样
var framesPerSecond = 60;
var tweenObject = new Fx.Tween(tweenElement, {
fps: framesPerSecond
});
unit(单位)
这个选项设置了数字的单位。例如,你的100是指100个像素(px)、百分比还是em?
参考代码:
// 建立你的渐变或者形变
// 然后在大括号{ }之间设置你的选项
var morphObject = new Fx.Morph(morphElement, {
unit: '%'
});
link(连接)
link选项提供了一种方式可以让你管理多个启动效果的函数调用。例如,如果你有一个鼠标移上去(mouseover)的效果,你是希望每次用户移上去都启动这个效果吗?或者是,如果一个人把鼠标移上去两次,它应该忽略第二个响应还是应该把它们串连起来,然后等第一次调用完成以后再第二次调用这个效果?link又三个设置:
“ignore”(默认)——在一个效果没有完成之前忽略任何启动新效果的调用
“cancel”——如果有另外一个效果调用,则放弃当前的效果,转而处理新的效果调用
“chain”——链可以让你把效果像“链条”一样把效果连接起来,把这些调用进行堆栈,然后逐一调用这些效果,直到完成
参考代码:
// 建立你的渐变或者形变
// 然后在大括号{ }之间设置你的选项
var morphObject = new Fx.Morph(morphElement, {
link: 'chain'
});
duration(持续时间)
duration可以让你定义这个动画的持续时间。持续事件和速度是不一样的,因此如果你想让一个对象在一秒内移动100个像素,那么它将比一个每秒移动1000个像素的对象要慢。你可以输入一个数字(以毫秒为单位)、一个值为数字的变量或者三个快捷方式:
“short”=250ms
“normal”=500ms(默认)
“long”=1000ms
参考代码:
// 建立你的渐变或者形变
// 然后在大括号{ }之间设置你的选项
var morphObject = new Fx.Morph(morphElement, {
duration: 'long'
});
// 或者这样
var morphObject = new Fx.Morph(morphElement, {
duration: 1000
});
transition(过渡效果)
最后一个选项:transition,可以让你决定过渡类型。例如,它是不是一个平滑的过渡或者它应该先慢慢开始然后加速直到结束。看看这些在MooTools的核心库里可以用的过渡效果:
参考代码:
var tweenObject = new Fx.Tween(tweenElement, {
transition: 'quad:in'
});
注意:第一个过渡条在开始时触发了一个红色的醒目效果,在结束时触发了一个橙色的醒目效果。看看下面是怎么使用Fx的事件的。
这上面30个过渡类型可以分成十组:
Quad
Cubic
Quart
Quint
Expo
Circ
Sine
Back
Bounce
Elastic
每一个组都有三个选项:
Ease In
Ease Out
Ease In Out
- 标签:Mootools,1.2,教程,Fx.Morph,fx,事件
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
寻找Dreamweaver鲜为人知的小秘诀
正则表达式不匹配某个字符串
正视WEB标准,一本全面的标准参考书
![](https://img.aspxhome.com/file/UploadPic/20095/30/s3396721-91s.jpg)
HTML5 Canvas 起步(2) - 路径
![](https://img.aspxhome.com/file/UploadPic/20095/12/2-use-beginpath-60s.jpg)
用 AjaxTags 简化 Ajax 开发
初瞥 Google Chrome Frame
![](https://img.aspxhome.com/file/UploadPic/200910/6/medium-75s.jpg)
MySql常用命令总结
Oracle数据库的空间管理技巧
试试把xml和javascript写到同一个文件里面
使用Title提升可访问性二
Oracle 的入门心得 强烈推荐
asp如何将数字转化成条形图?
数据库安全管理的三个经验分享
IE6模拟max-width对图片缩放
Oracle 数据库中创建合理的数据库索引
手机验证设计感悟
![](https://img.aspxhome.com/file/UploadPic/20111/20/01-64s.jpg)
解读HTML:大厦的基石
如何创建SQL Server 2000故障转移群集
显示你个性的鼠标指针
[多图]新:60个国外创意404页面设计
![](https://img.aspxhome.com/file/UploadPic/up/9-404.gif)