MooTools教程(11):Fx.Morph、Fx选项和Fx事件

作者佚名技术来源网页制作浏览发布时间 2012-03-07

示例

为了生成上面的变形代码，我们可以用一种我们在这个系列的教程中还没有见过的方式来重用我们的函数。这上面所有的变形元素都使用了两个函数，一个当鼠标进入时渐变淡出，另外一个在当鼠标离开时渐变返回：

参考代码： [复制代码] [保存代码]

// 这是我们在鼠标进入时调用的函数
// 宽度渐变到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)
});

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!

分享到：更多

你可能对下面的文章感兴趣

上一篇: rails制作rss feed下一篇: javascript变量作用域在不同浏览器的处理

关于MooTools教程(11):Fx.Morph、Fx选项和Fx事件的所有评论

随机推荐