Mootools1.2教程滑动效果（Slide）_Mootools
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了Mootools1.2教程滑动效果（Slide）_Mootools，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含6204字，纯文字阅读大概需要9分钟。
内容图文
基本用法 就像我们前面看过的所有类一样，我们在把这个类应用到一个元素上面时，我们要做的第一件事就是初始化一个新的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选项和事件的教程。
下载最后示例代码的zip压缩文件
包含你开始所需要的所有东西。
内容总结
以上是互联网集市为您收集整理的Mootools1.2教程滑动效果（Slide）_Mootools全部内容，希望文章能够帮你解决Mootools1.2教程滑动效果（Slide）_Mootools所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】