mootools中集成了一些非常好用的界面组件, 也提供了非常好用的界面效果工具类,用这些工具做界面效果,感觉上比用Prototype+Scriptaculous开发更方便,效果也更加的顺畅平滑。
mootools的界面库Moo.Fx的设计十分的讲究OO原则,通过对提供了基本功能的基类的继承,扩展出了不同功能的工具类和组件类。Fx.Base就是这样一个基础类,它本身实现了Events,Chain,Options三个类,它包含了界面效果的最基本的动作和属性:
构造方法的可选属性:
------------------------------------------------------------------------------------------------------------------------------
onStart - 效果开始前执行的方法,默认是一个空的function。你可以指定你的function。
onComplete - 完成效果后执行的方法,默认是一个空的function。你可以指定你的function。
onCancel - 中断效果后执行的方法,默认是一个空的function。你可以指定你的function。
transition - 效果的过渡变换所使用的方程,用来描述效果的变化规律。你可以在Fx.Transitions类中找到其他的方程,默认使用的是Fx.Transitions.sineInOut(即正弦)
duration - 变化频率,毫秒。默认为500。
unit - 变化量的单位。默认是'px',你可以指定如'em','%'之类。
wait - true/false。指定在执行下一个过渡效果之前是否等待当前的过渡效果执行结束。默认为true
fps - 帧频。即每秒所执行的变换次数。默认为30帧/秒。
------------------------------------------------------------------------------------------------------------------------------
方法:set
作用:不经过过渡变换效果,直接设置为指定的值
js 代码
- var myFx = new Fx.Style('myElement', 'opacity').set(0);
方法:start
作用:执行效果,让指定的开始值过渡变换到指定的结束值
js 代码
- var myFx = new Fx.Style('myElement', 'opacity').start(0,1);
方法:stop
作用:中断效果的执行,如果指定了参数为false,则会执行onCancel指定的方法。
最后,如果要查看有哪些变换方程可以选用,可以看Fx.Transitions.js里的Fx.Transitions类,里面提供了非常之多的变换方程,具体的效果差别,自己去一个个去试试看吧。
分享到:
相关推荐
#### 十一、多彩的开始 这部分可能介绍了Mootools的一些高级用法或特殊功能,帮助开发者更好地理解和运用这个框架。 #### 十二、实践案例 通过具体的应用示例来展示如何在实际项目中应用 Mootools,这对于初学者来...
结合Jquery和CSS3可以创建出多彩的滑动效果。CSS3的引入给传统的Jquery幻灯片带来了更多样的视觉效果,如渐变、阴影和动画效果,这让幻灯片不仅限于静态的展示。 9. CoinSlider CoinSlider是一款国内较为流行的幻灯...
JavaScript框架的种类有很多,如jQuery、ExtJS、Prototype、MooTools等。每种框架都有其优缺点,本文将对jQuery和ExtJS进行对比研究,分析其优缺点,以期为Web开发者提供帮助。 jQuery简介 jQuery是一个快速、简洁...
1. **HTML5与CSS3**:2010年是HTML5标准逐渐成熟的时期,新的标签如, , 等开始被广泛使用,而CSS3的过渡效果、多列布局、媒体查询等特性也让网页设计更加丰富多彩。 2. **JavaScript框架**:jQuery在当时是前端开发...
7. 响应式设计:在2006年,响应式设计的概念开始兴起,这要求特效不仅要考虑桌面浏览器,还要适应不同尺寸的移动设备,确保在各种屏幕尺寸下都能良好展现。 8. Web安全:在使用这些特效库时,开发者必须注意代码的...