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 高亮中的变化。
