Mootools 1.2教程 滑动效果(Slide)_Mootools
程序员文章站
2024-01-01 23:38:52
...
基本用法
就像我们前面看过的所有类一样,我们在把这个类应用到一个元素上面时,我们要做的第一件事就是初始化一个新的Fx.Slide实例。
首先,让我们为滑动元素建立一个HTML文件。
参考代码:
我们的CSS也不需要任何修饰。
参考代码:
.slide {
margin: 20px 0;
padding: 10px;
width: 200px;
background-color: #DAF7B4;
}
最后,我们来初始化一个新的Fx.Slide并给它传递我们的元素变量。
参考代码:
var slideElement = $('slide_element');
var slideVar = new Fx.Slide(slideElement, {
// Fx.Slide选项
mode: 'vertical', // 默认是'vertical'(垂直)
// Fx选项
transition: 'sine:in',
duration: 300,
// Fx事件
onStart: function(){
$('start').highlight("#EBCC22");
}
});
由于Fx.Slide是Fx的一个扩展,因此你可以使用Fx的任何选项和事件,不过Fx.Slide也有一些自己的选项。
Fx.Slide选项
Fx.Slide只有两个选项——“mode”和“wrapper”。坦白地说,我从来没有发现我自己使用过“wrapper”(我从来没有遇到过这种需求),不过“mode”决定了你是希望水平滑动还是垂直滑动。
mode(模式)
模式给了你两个选择——“垂直”或者“水平”。垂直是从顶部到底部的显示,水平是从左边到右边的显示。这里没有从底部到顶部或从右边到左边的选项。不过我知道修改类本身来实现这些功能是相对简单的。在我看来,我还是希望这能成为一个标准的选项,如果有人已经修改了这个类并允许这些选项,请给我们留言。
wrapper(包装器)
在缺省情况下,Fx.Slide会在你的滑动元素的外面添加一个包装器,并指定其“overflow”属性的值为“hidden”。wrapper允许你设置其他元素作为该元素的包装器。就像我上面所说的,我不清楚它在那里会被用到,我也有兴趣听到任何关于这个东西的想法。(感谢mooforum.net的horseweapon让我明白这个一点。)
Fx.Slide的方法
Fx.Slide也提供了许多方法来显示或者隐藏元素。
.slideIn()
正如名字所告诉你的,该方法讲触发start(开始)时间并显示你的元素。
.slideOut()
滑动元素到隐藏状态。
.toggle()
这个方法有可能显示或者隐藏元素,结果完全取决于这个元素的当前状态。用于点击事件时非常有用。
.hide()
这将隐藏元素,但不使用滑动效果。
.show()
这将显示元素,但不使用滑动效果。
通过方法重新设置模式选项
上面的每个方法均可以接受一个可选的mode参数,允许你覆盖之前设置的选项。
参考代码:
slideVar.slideIn('horizontal');
Fx.Slide快捷方式
Fx.Slide类还提供了一些非常方便的快捷方式来给元素添加滑动效果。
.set('slide');
你可以不用初始化一个新类,而通过set方法来给元素添加一个slide对象来创建一个新的slide实例。
参考代码:
slideElement.set('slide');
设置选项
甚至你还可以通过快捷方式设置选项:
参考代码:
slideElement.set('slide', {duration: 1250});
.slide()
一旦用.set()方法设置了slide,你就可以用.slide()方法来初始化它。
参考代码:
slideElement.slide('in');
.slide方法可以接受以下参数:
'in'
'out'
'toggle'
'show'
'hide'
每一个参数均和上面的方法相对应。
代码示例
上面所讲的这些基本涵盖了全部基本用法。下面的示例将使用我们上面学到的大部分知识,显示一些不同的滑动元素,并提供一些div作为指示器,以便你可以清楚地看到这些事件。
首先,创建HTML文件。
参考代码:
接下来是CSS文件。我们让它尽量保持简单。
参考代码:
.ind {
width: 200px;
padding: 10px;
background-color: #87AEE1;
font-weight: bold;
border-bottom: 1px solid white;
}
.slide {
margin: 20px 0;
padding: 10px;
width: 200px;
background-color: #DAF7B4;
}
#slide_wrap {
padding: 30px;
background-color: #D47000;
}
最后,是我们的Mootools JavaScript代码:
参考代码:
window.addEvent('domready', function() {
// 示例A
var slideElement = $('slideA');
var slideVar = new Fx.Slide(slideElement, {
// Fx.Slide选项
mode: 'horizontal', // 默认是'vertical'
//wrapper: this.element, // 默认是this.element
// Fx选项
link: 'cancel',
transition: 'elastic:out',
duration: 'long',
// Fx事件
onStart: function(){
$('start').highlight("#EBCC22");
},
onCancel: function(){
$('cancel').highlight("#EBCC22");
},
onComplete: function(){
$('complete').highlight("#EBCC22");
}
}).hide().show().hide(); // 注意,.hide和.show方法并不触发事件
$('openA').addEvent('click', function(){
slideVar.slideIn();
});
$('closeA').addEvent('click', function(){
slideVar.slideOut();
});
// 示例B
var slideElementB = $('slideB');
var slideVarB = new Fx.Slide(slideElementB, {
// Fx.Slide选项
mode: 'vertical', // 默认是'vertical'
// Fx选项
// 注意:链式效果可以让你多次点击,
// 当鼠标离开后,
// 每次点击的动画可以依次触发
link: 'chain',
// Fx事件
onStart: function(){
$('start').highlight("#EBCC22");
},
onCancel: function(){
$('cancel').highlight("#EBCC22");
},
onComplete: function(){
$('complete').highlight("#EBCC22");
}
});
$('openB').addEvent('click', function(){
slideVarB.slideIn();
});
$('closeB').addEvent('click', function(){
slideVarB.slideOut();
});
// 示例 C
var slideElementC = $('slideC');
var slideVarC = new Fx.Slide(slideElementC, {
// Fx.Slide选项
mode: 'vertical', // 默认是'vertical'
//wrapper: this.element, // 默认是this.element
// Fx选项
//link: 'cancel',
transition: 'sine:in',
duration: 300,
// Fx事件
onStart: function(){
$('start').highlight("#EBCC22");
},
onCancel: function(){
$('cancel').highlight("#EBCC22");
},
onComplete: function(){
$('complete').highlight("#EBCC22");
}
}).hide();
$('openC').addEvent('click', function(){
slideVarC.toggle();
});
$('slideD').slide('hide');
$('openD').addEvent('click', function(){
$('slideD').slide('toggle');
});
// 示例C
var slideElementE = $('slideE');
var slideWrap = $('slide_wrap');
var slideVarE = new Fx.Slide(slideElementE, {
// Fx.Slide选项
//mode: 'vertical', // 默认是'vertical'
wrapper: slideWrap // 默认是this.element
}).hide();
$('openE').addEvent('click', function(){
slideVarE.toggle();
});
});
就像我们前面看过的所有类一样,我们在把这个类应用到一个元素上面时,我们要做的第一件事就是初始化一个新的Fx.Slide实例。
首先,让我们为滑动元素建立一个HTML文件。
参考代码:
复制代码 代码如下:
我们的CSS也不需要任何修饰。
参考代码:
复制代码 代码如下:
.slide {
margin: 20px 0;
padding: 10px;
width: 200px;
background-color: #DAF7B4;
}
最后,我们来初始化一个新的Fx.Slide并给它传递我们的元素变量。
参考代码:
复制代码 代码如下:
var slideElement = $('slide_element');
var slideVar = new Fx.Slide(slideElement, {
// Fx.Slide选项
mode: 'vertical', // 默认是'vertical'(垂直)
// Fx选项
transition: 'sine:in',
duration: 300,
// Fx事件
onStart: function(){
$('start').highlight("#EBCC22");
}
});
由于Fx.Slide是Fx的一个扩展,因此你可以使用Fx的任何选项和事件,不过Fx.Slide也有一些自己的选项。
Fx.Slide选项
Fx.Slide只有两个选项——“mode”和“wrapper”。坦白地说,我从来没有发现我自己使用过“wrapper”(我从来没有遇到过这种需求),不过“mode”决定了你是希望水平滑动还是垂直滑动。
mode(模式)
模式给了你两个选择——“垂直”或者“水平”。垂直是从顶部到底部的显示,水平是从左边到右边的显示。这里没有从底部到顶部或从右边到左边的选项。不过我知道修改类本身来实现这些功能是相对简单的。在我看来,我还是希望这能成为一个标准的选项,如果有人已经修改了这个类并允许这些选项,请给我们留言。
wrapper(包装器)
在缺省情况下,Fx.Slide会在你的滑动元素的外面添加一个包装器,并指定其“overflow”属性的值为“hidden”。wrapper允许你设置其他元素作为该元素的包装器。就像我上面所说的,我不清楚它在那里会被用到,我也有兴趣听到任何关于这个东西的想法。(感谢mooforum.net的horseweapon让我明白这个一点。)
Fx.Slide的方法
Fx.Slide也提供了许多方法来显示或者隐藏元素。
.slideIn()
正如名字所告诉你的,该方法讲触发start(开始)时间并显示你的元素。
.slideOut()
滑动元素到隐藏状态。
.toggle()
这个方法有可能显示或者隐藏元素,结果完全取决于这个元素的当前状态。用于点击事件时非常有用。
.hide()
这将隐藏元素,但不使用滑动效果。
.show()
这将显示元素,但不使用滑动效果。
通过方法重新设置模式选项
上面的每个方法均可以接受一个可选的mode参数,允许你覆盖之前设置的选项。
参考代码:
复制代码 代码如下:
slideVar.slideIn('horizontal');
Fx.Slide快捷方式
Fx.Slide类还提供了一些非常方便的快捷方式来给元素添加滑动效果。
.set('slide');
你可以不用初始化一个新类,而通过set方法来给元素添加一个slide对象来创建一个新的slide实例。
参考代码:
复制代码 代码如下:
slideElement.set('slide');
设置选项
甚至你还可以通过快捷方式设置选项:
参考代码:
复制代码 代码如下:
slideElement.set('slide', {duration: 1250});
.slide()
一旦用.set()方法设置了slide,你就可以用.slide()方法来初始化它。
参考代码:
复制代码 代码如下:
slideElement.slide('in');
.slide方法可以接受以下参数:
'in'
'out'
'toggle'
'show'
'hide'
每一个参数均和上面的方法相对应。
代码示例
上面所讲的这些基本涵盖了全部基本用法。下面的示例将使用我们上面学到的大部分知识,显示一些不同的滑动元素,并提供一些div作为指示器,以便你可以清楚地看到这些事件。
首先,创建HTML文件。
参考代码:
复制代码 代码如下:
Start
Cancel
Complete
接下来是CSS文件。我们让它尽量保持简单。
参考代码:
复制代码 代码如下:
.ind {
width: 200px;
padding: 10px;
background-color: #87AEE1;
font-weight: bold;
border-bottom: 1px solid white;
}
.slide {
margin: 20px 0;
padding: 10px;
width: 200px;
background-color: #DAF7B4;
}
#slide_wrap {
padding: 30px;
background-color: #D47000;
}
最后,是我们的Mootools JavaScript代码:
参考代码:
复制代码 代码如下:
window.addEvent('domready', function() {
// 示例A
var slideElement = $('slideA');
var slideVar = new Fx.Slide(slideElement, {
// Fx.Slide选项
mode: 'horizontal', // 默认是'vertical'
//wrapper: this.element, // 默认是this.element
// Fx选项
link: 'cancel',
transition: 'elastic:out',
duration: 'long',
// Fx事件
onStart: function(){
$('start').highlight("#EBCC22");
},
onCancel: function(){
$('cancel').highlight("#EBCC22");
},
onComplete: function(){
$('complete').highlight("#EBCC22");
}
}).hide().show().hide(); // 注意,.hide和.show方法并不触发事件
$('openA').addEvent('click', function(){
slideVar.slideIn();
});
$('closeA').addEvent('click', function(){
slideVar.slideOut();
});
// 示例B
var slideElementB = $('slideB');
var slideVarB = new Fx.Slide(slideElementB, {
// Fx.Slide选项
mode: 'vertical', // 默认是'vertical'
// Fx选项
// 注意:链式效果可以让你多次点击,
// 当鼠标离开后,
// 每次点击的动画可以依次触发
link: 'chain',
// Fx事件
onStart: function(){
$('start').highlight("#EBCC22");
},
onCancel: function(){
$('cancel').highlight("#EBCC22");
},
onComplete: function(){
$('complete').highlight("#EBCC22");
}
});
$('openB').addEvent('click', function(){
slideVarB.slideIn();
});
$('closeB').addEvent('click', function(){
slideVarB.slideOut();
});
// 示例 C
var slideElementC = $('slideC');
var slideVarC = new Fx.Slide(slideElementC, {
// Fx.Slide选项
mode: 'vertical', // 默认是'vertical'
//wrapper: this.element, // 默认是this.element
// Fx选项
//link: 'cancel',
transition: 'sine:in',
duration: 300,
// Fx事件
onStart: function(){
$('start').highlight("#EBCC22");
},
onCancel: function(){
$('cancel').highlight("#EBCC22");
},
onComplete: function(){
$('complete').highlight("#EBCC22");
}
}).hide();
$('openC').addEvent('click', function(){
slideVarC.toggle();
});
$('slideD').slide('hide');
$('openD').addEvent('click', function(){
$('slideD').slide('toggle');
});
// 示例C
var slideElementE = $('slideE');
var slideWrap = $('slide_wrap');
var slideVarE = new Fx.Slide(slideElementE, {
// Fx.Slide选项
//mode: 'vertical', // 默认是'vertical'
wrapper: slideWrap // 默认是this.element
}).hide();
$('openE').addEvent('click', function(){
slideVarE.toggle();
});
});
学习更多……
Fx.Slide是一个多功能,非常有用的插件。要学习更多,查看Fx.Slide文档,Fx.Morph和Fx文档。
另外,也一定要阅读一下我们关于Fx.Morph和Fx选项和事件的教程。
包含你开始所需要的所有东西。
推荐阅读
-
Mootools 1.2教程 滑动效果(Slide)_Mootools
-
Mootools 1.2教程 定时器和哈希简介_Mootools
-
Mootools 1.2教程 事件处理_Mootools
-
Mootools 1.2教程 滚动条(Slider)_Mootools
-
Mootools 1.2教程 排序类和方法简介_Mootools
-
Mootools 1.2教程 设置和获取样式表属性_Mootools
-
Mootools 1.2 手风琴(Accordion)教程_Mootools
-
Mootools 1.2教程 类(一)_Mootools
-
Mootools 1.2教程 输入过滤第一部分(数字)_Mootools
-
Mootools 1.2教程 Tooltips_Mootools