- MooTools 教程
- MooTools - 主页
- MooTools - 介绍
- MooTools - 安装
- MooTools - 程序结构
- MooTools - 选择器
- MooTools - 使用数组
- MooTools - 函数
- MooTools - 事件处理
- MooTools - DOM 操作
- MooTools - 样式属性
- MooTools - 输入过滤
- MooTools - 拖放
- MooTools - 正则表达式
- MooTools - 周期
- MooTools - 滑块
- MooTools - 可排序
- MooTools - 手风琴
- MooTools - 提示
- MooTools - 制表符内容
- MooTools - 类
- MooTools - Fx.Element
- MooTools - Fx.Slide
- MooTools - Fx.Tween
- MooTools - Fx.Morph
- MooTools - Fx.Options
- MooTools - Fx.Events
- MooTools 有用资源
- MooTools - 快速指南
- MooTools - 有用资源
- MooTools - 讨论
MooTools - 反向过渡
首先进行反向转换,然后全部前向。我们举一个示例,我们将 鼠标按下事件添加到 div 元素以及反向和正向事件。查看以下代码。
示例
<!DOCTYPE html> <html> <head> <style> #back_in { width: 100px; height: 20px; background-color: #F4D03F; border: 2px solid #808B96; } #back_out { width: 100px; height: 20px; background-color: #F4D03F; border: 2px solid #808B96; } #back_in-out { width: 100px; height: 20px; background-color: #F4D03F; border: 2px solid #808B96; } </style> <script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script> <script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script> <script type = "text/javascript"> window.addEvent('domready', function() { $('back_in').addEvent('mousedown', function(event) { this.set('tween', {duration: 'long', transition: 'back:in'}); this.tween('width', [80, 400]); }); $('back_out').addEvent('mousedown', function(event) { this.set('tween', {duration: 'long', transition: 'back:out'}); this.tween('width', [80, 400]); }); $('back_in-out').addEvent('mousedown', function(event) { this.set('tween', {duration: 'long', transition: 'back:in-out'}); this.tween('width', [80, 400]); }); }); </script> </head> <body> <div id = "back_in"> Back : in</div><br/> <div id = "back_out"> Back : out</div><br/> <div id = "back_in-out"> Back : in-out</div><br/> </body> </html>
你会收到以下输出 −
输出
mootools_fxoptions.htm
广告