Mootools 1.2教程(23)——滑动效果（Slide）
作者：Fanhp 来源：Fdream博客 发布时间：2009-03-04 12:33:00
标签：Mootools,教程,滑动,slide,JavaScript
先废话几句，这第23篇教程一直没有翻译出来，直到今天我看到待审评论里面有这么一条超长的评论，结果一看，居然是这篇教程的翻译稿。这位热心的Mootools爱好者是Fanhp，非常感谢你的辛勤劳动！同时，我感到非常羞愧，实在是有愧大家的期望！愧疚是要拿行动来补的，于是我赶紧对此篇翻译进行了一些整理，修改了其中部分词句，并整理了示例代码。
原文地址：30 Days of Mootools 1.2 Tutorials - Day 23 - Fx.Slide
使用Fx.Slid显示元素
译者：Fanhp，整理：Fdream
阅读上一篇：Mootools 1.2教程(22)——同时进行多个形变动画
今天继续我们的Mootools 1.2教程的第23课，我们今天来讲一下Fx插件中的Fx.Slide。通过该插件，可以让你把内容以滑动的方式显示出来。它使用起来非常简单，是你UI工具箱中一个很好的工具。
基本用法
就像我们前面看过的所有类一样，我们在把这个类应用到一个元素上面时，我们要做的第一件事就是初始化一个新的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也有一些自己的选项。
0
投稿猜你喜欢
- asp连接sql server代码如下：dim connset conn = Serve
1 引子 Java，C#等各种高级语句的开发工具琳琅满目，争放异彩。但作为AJAX的主角的JavaScri- 分页，就是按照某种规则显示分组数据集，但是在SQL Server 中，分页并不是十分容易就能够实现。在过去，开发人员通常需要自己编写程序，使
- 最近，就“尊重”一词，个人小有感概。也许跟我说“尊重”一词的同事并不是这么想的，但我反思了一下自己，作为一名设计师，确实存在这些疑问（不足之
- PHP原型模式Prototype Pattern是什么原型模式是一种创建型模式，它可以通过复制现有对象来创建新的对象，而无需知道具体的创建过
- 1. 什么是404404是一个 http 错误代码，即请求的网页不存在。代码404的第一个“4”代表客户端的错误，如错误的网页位址；后两的数
- 阅读上一章：Chapter 10 应用CSSChapter 11 打印样式先前在第10章中,讨论了几种为文档应用CSS的方法,这一章是要研究
- 功能：实现网页内容的即时编辑，增加页面的可用性、交互性。方法1：直接通过textarea标签实现，请运行下边代码：<!DOCTYPE
- javascript可以根据输入值自动搜索显示相关的select列表，对于列表很长时可以很方便的查找到要的值。js代码：<script
- 今天因为做一个效果的时候需要CSS的定位来实现，于是我就根据自己原来对CSS的了解，用absolute和relative摆弄了好一阵子，总是
- 先从String的扩展开始吧，后面有一部分的扩展要依赖这里扩展的方法。为了更加清晰和详细，我会一个方法一个方法地贴出来，你完全可以把所有的方
- AJAX初体验之上手篇AJAX是这两年蛮热的东西，我也凑凑热闹，前些天去找了些教程学学，下面就按整个处理过程把自己学的东西写写，不过，因为是
- 不论是企业网站、个人博客，或者购物网站、游戏网站，我们都希望能吸引访问者并且给他们留下愉快的访问体验。可用性是用户体验的一种度量，它可以用访
- 购物车是电子商务网站中不可缺少的组成部分，但目前大多数购物车只能作为一个顾客选中商品的展示，客户端无法将购物车里的内容提取出来满足自己事务处
- blankzheng的blog：http://www.planabc.net/经常有朋友问我，网站要在哪些浏览器上测试？要达到怎样的兼容？我
- 存储过程采用的是select top 加 not in的方式完成，速度也算是相当快了 我测试过了百万级数据量一般查询在1秒一下，贴出来大家交
- 如果说亲密性原则是对元素的归类组合，是将元素之间逻辑理解上的差异在视觉上表现出来，是属于信息分类的话，那么对齐原则即是在视觉上串起这些差异化
- 【译者的话】我们曾经在《透视色轮》一文中探讨过色轮的构成及作用，但你可能更多的只是将其作为了解颜色关系的一个工具，却不一定将其作为实际设计中
- 在html 5增加了新元素header、footer，测试过发现IE不能解析html 5新增的元素。代码如下：<!DOCTYPE ht
- 解决方法：1。 改表法。可能是你的帐号不允许从远程登陆，只能在localhost。这个时候只要在localhost的那台电脑，登入mysql
