MooTools - Fx.Tween
MooTools 为不同的过渡提供了不同的 FX.Tween 快捷方式,例如转换为平滑动画过渡的闪烁效果。让我们讨论一下 Tween 快捷方式中的几种方法。
tween()
此方法在两个样式属性值之间提供平滑过渡。让我们举一个例子,使用 tween 方法将 div 的宽度从 100px 更改为 300px。看看下面的代码。
示例
<!DOCTYPE html> <html> <head> <style> #body_div { width: 100px; height: 200px; background-color: #1A5276; border: 3px solid #dd97a1; } </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"> var tweenFunction = function(){ $('body_div').tween('width','300px'); } window.addEvent('domready', function() { $('tween_button').addEvent('click', tweenFunction); }); </script> </head> <body> <div id = "body_div"> </div><br/> <input type = "button" id = "tween_button" value = "Set Width to 300 px"/> </body> </html>
您将收到以下输出 −
输出
fade()
此方法调整元素不透明度或透明度。让我们举一个例子,其中我们使用 MooTools 提供一个按钮来调整 div 的不透明度。看看下面的代码。
示例
<!DOCTYPE html> <html> <head> <style> #body_div { width: 100px; height: 200px; background-color: #1A5276; border: 3px solid #dd97a1; } </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"> var fadeFunction = function(){ $('body_div').fade('.5'); } window.addEvent('domready', function() { $('fade_button').addEvent('click', fadeFunction); }); </script> </head> <body> <div id = "body_div"> </div><br/> <input type = "button" id = "fade_button" value = "fade to 50%"/> </body> </html>
您将收到以下输出 −
输出
点击淡化至 50% 按钮可将 div 不透明度降低至 50%。
highlight()
此方法使用不同的背景颜色突出显示元素。它包含 Tween Flash 的两个主要功能。
在第一个功能中,Tween Flash 用于将不同的背景颜色应用于元素。
一旦 Tween Flash 设置了不同的背景颜色,它就会切换到另一种背景颜色。
此方法用于在选择后突出显示元素。让我们举一个例子来理解这个方法。看看下面的代码。
示例
<!DOCTYPE html> <html> <head> <style> #div1 { width: 100px; height: 100px; background-color: #1A5276; border: 3px solid #dd97a1; } #div2 { width: 100px; height: 100px; background-color: #145A32; border: 3px solid #dd97a1; } </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"> var highlightFunction = function(){ $('div1').highlight('#eaea16'); } var highlightChangeFunction = function(){ $('div2').highlight('#eaea16', '#FBFCFC'); } window.addEvent('domready', function() { $('div1').addEvent('mouseover', highlightFunction); $('div2').addEvent('mouseover', highlightChangeFunction); }); </script> </head> <body> <div id = "div1"> </div><br/> <div id = "div2"> </div> </body> </html>
您将收到以下输出 −
输出
尝试将鼠标指针保持在彩色 div 上,并观察 Flash 高亮中的变化。