Mootools 1.2教程 滑动效果(Slide)


Posted in Javascript onSeptember 15, 2009

基本用法
就像我们前面看过的所有类一样,我们在把这个类应用到一个元素上面时,我们要做的第一件事就是初始化一个新的Fx.Slide实例。
首先,让我们为滑动元素建立一个HTML文件。
参考代码:

<div id="slide_element" class="slide">这里是要滑动显示的内容。</div>

我们的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文件。
参考代码:
<div id="start" class="ind">Start</div> 
<div id="cancel" class="ind">Cancel</div> 
<div id="complete" class="ind">Complete</div> 
<br /><br /> 
<button id="openA">open A</button> 
<button id="closeA">close A</button> 
<div id="slideA" class="slide">Here is some content - A. Notice the delay before onComplete fires. This is due to the transition effect, the onComplete will not fire until the slide element stops "elasticing." Also, notice that if you click back and forth, it will "cancel" the previous call and give the new one priority.</div> 
<button id="openB">open B</button> 
<button id="closeB">close B</button> 
<div id="slideB" class="slide">Here is some content - B. Notice how if you click me multiple times quickly I "chain" the events. This slide is set up with the option "link: 'chain'"</div> 
<button id="openC">toggle C</button> 
<div id="slideC" class="slide">Here is some content - C</div> 
<button id="openD">toggle D</button> 
<div id="slideD" class="slide">Here is some content - D. Notice how I am not hooked into any events. This was done with the .slide shortcut.</div> 
<button id="openE">toggle E</button> 
<div id="slide_wrap"> 
<div id="slideE" class="slide">Here is some content - E</div> 
</div>

接下来是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.MorphFx文档

另外,也一定要阅读一下我们关于Fx.Morph和Fx选项和事件的教程

下载最后示例代码的zip压缩文件

包含你开始所需要的所有东西。

Javascript 相关文章推荐
Jquery在IE7下无法使用 $.ajax解决方法
Nov 11 Javascript
在jquery中combobox多选的不兼容问题总结
Dec 24 Javascript
原生Js实现简易烟花爆炸效果的方法
Mar 20 Javascript
基于JavaScript实现全屏透明遮罩div层锁屏效果
Jan 26 Javascript
基于Bootstrap实现的下拉菜单手机端不能选择菜单项的原因附解决办法
Jul 22 Javascript
AngularJS ng-template寄宿方式用法分析
Nov 07 Javascript
js入门之Function函数的使用方法【新手必看】
Nov 22 Javascript
Vue 页面切换效果之 BubbleTransition(推荐)
Apr 08 Javascript
layui table 列宽百分比显示的实现方法
Sep 28 Javascript
Vue + Scss 动态切换主题颜色实现换肤的示例代码
Apr 27 Javascript
Node 模块原理与用法详解
May 13 Javascript
详解微信小程序动画Animation执行过程
Sep 23 Javascript
Mootools 1.2教程 同时进行多个形变动画
Sep 15 #Javascript
Mootools 1.2教程(21)——类(二)
Sep 15 #Javascript
Mootools 1.2教程 选项卡效果(Tabs)
Sep 15 #Javascript
Mootools 1.2教程 Tooltips
Sep 15 #Javascript
Mootools 1.2教程 类(一)
Sep 15 #Javascript
Mootools 1.2 手风琴(Accordion)教程
Sep 15 #Javascript
Mootools 1.2教程 排序类和方法简介
Sep 15 #Javascript
You might like
php实现在线通讯录功能(附源码)
2016/05/13 PHP
PHP XML Expat解析器知识点总结
2019/02/15 PHP
laravel 如何实现引入自己的函数或类库
2019/10/15 PHP
javascript实现的网页局布刷新效果
2008/12/01 Javascript
基于jquery+thickbox仿校内登录注册框
2010/06/07 Javascript
理解Javascript_12_执行模型浅析
2010/10/18 Javascript
javascript正则表达式中参数g(全局)的作用
2010/11/11 Javascript
javascript向flash swf文件传递参数值注意细节
2012/12/11 Javascript
jquery 获取dom固定元素 添加样式的简单实例
2014/02/04 Javascript
node.js中的buffer.copy方法使用说明
2014/12/14 Javascript
jQuery异步提交表单的两种方式
2016/09/13 Javascript
js复制内容到剪贴板代码,js复制代码的简单实例
2016/10/27 Javascript
JS实现重新加载当前页面
2016/11/29 Javascript
JS 调用微信扫一扫功能
2016/12/22 Javascript
jQuery层级选择器实例代码
2017/02/06 Javascript
JS中定位 position 的使用实例代码
2017/08/06 Javascript
JavaScript使用百度ECharts插件绘制饼图操作示例
2019/11/26 Javascript
es6中使用map简化复杂条件判断操作实例详解
2020/02/19 Javascript
Vue 打包体积优化方案小结
2020/05/20 Javascript
Python安装Imaging报错:The _imaging C module is not installed问题解决方法
2014/08/22 Python
总结用Pdb库调试Python的方式及常用的命令
2016/08/18 Python
Python基础学习之基本数据结构详解【数字、字符串、列表、元组、集合、字典】
2019/06/18 Python
python读写Excel表格的实例代码(简单实用)
2019/12/19 Python
Windows下Sqlmap环境安装教程详解
2020/08/04 Python
html5 canvas合成海报所遇问题及解决方案总结
2017/08/03 HTML / CSS
英国马匹装备和马术用品购物网站:Equine Superstore
2019/03/03 全球购物
Electric官网:美国高级眼镜和配件品牌
2020/06/04 全球购物
SQL Server 2000数据库的文件有哪些,分别进行描述。
2015/11/09 面试题
利用promise及参数解构封装ajax请求的方法
2021/03/24 Javascript
应聘医药销售自荐书范文
2014/02/08 职场文书
小学校长汇报材料
2014/08/20 职场文书
反对四风问题自我剖析材料
2014/09/29 职场文书
2014年客服工作总结与计划
2014/12/09 职场文书
副总经理岗位职责范本
2015/04/08 职场文书
Nginx利用Logrotate实现日志分割
2022/05/20 Servers
SQL Server中搜索特定的对象
2022/05/25 SQL Server