发布于 2016-12-12 21:36:24 | 61 次阅读 | 评论: 0 | 来源: 网友投递
MooTools JavaScript WEB应用框架
MooTools是一个简洁，模块化，面向对象的开源JavaScript web应用框架。
它为web开发者提供了一个跨浏览器js解决方案。在处理js、css、html时候。
它提供了一个比普通js更面向对象的documentAPI。
// 首先，把我们的元素赋值给一个变量
var morphElement = $('morph_element');
// 现在，我们创建一个新的形变
var morphObject = new Fx.Morph(morphElement);
// 现在我们可以设置样式属性，就像Fx.Tween一样
// 不过我们这里可以设置多个样式属性
morphObject.set({
'width': 100,
'height': 100,
'background-color': '#eeeeee'
});
// 我们也可以像启动一个渐变一样来启动我们的形变
// 不过我们这里要同时放置多个属性值
morphObject.start({
'width': 300,
'height': 300,
'background-color': '#d3715c'
});
var morphSet = function(){
// 这里我们可以像Fx.Tween一样设置样式属性
// 不过在这里我们可以同时设置多个样式属性
this.set({
'width': 100,
'height': 100,
'background-color': '#eeeeee'
});
}
var morphStart = function(){
// 我们也可以像启动一个渐变一样启动一个形变
// 不过现在我们可以同时设置多个样式属性
this.start({
'width': 300,
'height': 300,
'background-color': '#d3715c'
});
}
var morphReset = function(){
// 设置为最开始的值
this.set({
'width': 0,
'height': 0,
'background-color': '#ffffff'
});
}
window.addEvent('domready', function() {
// 首先，把我们的元素赋值给一个变量
var morphElement = $('morph_element');
// 现在，我们创建我们的形变
var morphObject = new Fx.Morph(morphElement);
// 在这里我们给按钮添加点击事件
// 并且绑定morphObject和这个函数
// 从而可以在上面的函数中使用"this"
$('morph_set').addEvent('click', morphSet.bind(morphObject));
$('morph_start').addEvent('click', morphStart.bind(morphObject));
$('morph_reset').addEvent('click', morphReset.bind(morphObject));
});
<div id="morph_element"></div>
<button id="morph_set">Set</button>
<button id="morph_start">Start</button>
<button id="morph_reset">reset</button>
// 建立你的渐变或者形变
// 然后在大括号{ }之间设置你的选项
var morphObject = new Fx.Morph(morphElement, {
// 首先是选项的名字
// 然后后面跟一个冒号（:）
// 然后定义你的选项
duration: 'long',
transition: 'sine:in'
});
// 建立你的渐变或者形变
// 然后在大括号{ }之间设置你的选项
var morphObject = new Fx.Morph(morphElement, {
fps: 60
});
// 或者这样
var framesPerSecond = 60;
var tweenObject = new Fx.Tween(tweenElement, {
fps: framesPerSecond
});
// 建立你的渐变或者形变
// 然后在大括号{ }之间设置你的选项
var morphObject = new Fx.Morph(morphElement, {
unit: '%'
});
// 建立你的渐变或者形变
// 然后在大括号{ }之间设置你的选项
var morphObject = new Fx.Morph(morphElement, {
link: 'chain'
});
// 建立你的渐变或者形变
// 然后在大括号{ }之间设置你的选项
var morphObject = new Fx.Morph(morphElement, {
duration: 'long'
});
// 或者这样
var morphObject = new Fx.Morph(morphElement, {
duration: 1000
});
var tweenObject = new Fx.Tween(tweenElement, {
transition: 'quad:in'
});
// 首先我们把一个新的Fx.Tween赋值给一个变量
// 然后定义我们要渐变的元素
quadIn = new Fx.Tween(quadIn, {
// 这里是一些选项
link: 'cancel',
transition: ‘quad:in',
// 这里是一些事件
onStart: function(passes_tween_element){
// 这些事件都会传递渐变的对象
// 因此当动画开始时
// 这里我们调用一个"highlight"效果
passes_tween_element.highlight('#C54641');
},
// 注意这个逗号是怎样始终出现在每个事件和选项之间的
// 但是最后一个事件或者选项后面没有
onComplete: function(passes_tween_element){
// 在结束时，我们再应用一个highlight效果
passes_tween_element.highlight('#C54641');
}
});
// 这是我们在鼠标进入时调用的函数
// 宽度渐变到700px
var enterFunction = function() {
this.start('width', '700px');
}
// 这是我们在鼠标离开时调用的函数
// 宽度渐变回300px
var leaveFunction = function() {
this.start('width', '300px');
}
window.addEvent('domready', function() {
// 这里我们把一些元素赋值给变量
var quadIn = $('quadin');
var quadOut = $('quadout');
var quadInOut = $('quadinout');
// 然后我们创建三个渐变元素
// 分别对应上面的三个变量
quadIn = new Fx.Tween(quadIn, {
link: 'cancel',
transition: Fx.Transitions.Quad.easeIn,
onStart: function(passes_tween_element){
passes_tween_element.highlight('#C54641');
},
onComplete: function(passes_tween_element){
passes_tween_element.highlight('#E67F0E');
}
});
quadOut = new Fx.Tween(quadOut, {
link: 'cancel',
transition: 'quad:out'
});
quadInOut = new Fx.Tween(quadInOut, {
link: 'cancel',
transition: 'quad:in:out'
});
// 现在我们添加鼠标进入和鼠标离开事件
// 注意.addEvents的使用
// 则和.addEvent的使用类似
// 不过你可以通过下面的模式添加多个事件
$('quadin').addEvents({
// 首先，你要说明是什么事件，并把事件用单引号引起来
// 然后后面跟一个冒号（:）
// 最后放置你的函数
// 在这个例子中，函数banding到这个渐变对象
'mouseenter': enterFunction.bind(quadIn),
'mouseleave': leaveFunction.bind(quadIn)
});
$('quadout').addEvents({
// 注意我们这里是怎样重复使用这个函数的
'mouseenter': enterFunction.bind(quadOut),
'mouseleave': leaveFunction.bind(quadOut)
});
$('quadinout').addEvents({
// 我们这里也使用了那些同样的函数
// 不过每次我们都应用一个事件到不同的元素
// 并且绑定不同的渐变
'mouseenter': enterFunction.bind(quadInOut),
'mouseleave': leaveFunction.bind(quadInOut)
});
你可以通过Fx库里面的工具来获得对效果更细致的控制权。请一定要阅读一下文档中的Fx这一节，还有tween、morph和transitions。
包括这个页面上的实例，MooTools 1.2核心库，一个外部的JavaScript文件，一个外部的CSS文件或者一个简单的html文件。