【mootools中文实例诠释】Styles类（样式变换）的使用

先看看效果^_^!

变换的菜单

xiebiji.com 1
xiebiji.com 2
xiebiji.com 3
xiebiji.com 4
xiebiji.com 5

mt的styles非常强悍，能够同时变换元素的多个css属性，而且提供不同的曲线变化方式。
实例中的HTML代码：

<h3>变换的菜单</h3>
<ul id="idList">
	<li>xiebiji.com 1</li>
	<li>xiebiji.com 2</li>
	<li>xiebiji.com 3</li>
	<li>xiebiji.com 4</li>
	<li>xiebiji.com 5</li>
</ul>

实例中的css代码：

#idList {
	margin: 0;
	padding: 0;
}
 
#idList li {
	display: block;
	margin: 0;
	padding: 4px;
	width: 120px;
	background: #333;
	color: #888;
        list-style:none
}

实例中的mt代码：

var list = $$('#idList li');//获取id为#idList的ul标签下的所有li元素
list.each(function(element) {//遍历list数组里面的元素
 
	var fx = new Fx.Styles(element, {duration:200, wait:false});//建立样式对象，变换延迟为200毫秒，不需等待
 
	element.addEvent('mouseenter', function(){//给每个li元素增加鼠标进入事件
		fx.start({
			'margin-left': 5,
			'background-color': '#666',
			color: '#ff8'
		});//意思是margin-left由当前值变换到5，background-color同理，color同理
	});
 
	element.addEvent('mouseleave', function(){//给每个li元素增加鼠标移出事件
		fx.start({
			'margin-left': 0,
			'background-color': '#333',
			'color': '#888'
		});//同上
	});
 
});

^_^是不是很神奇？这个东西非常有用，很多特效用他来做可以简化很多！
原创文章，转载请注明，出处：http://xiebiji.com/2009/01/mootools-styles 作者：Joe ZHOU

4 Responses to 【mootools中文实例诠释】Styles类（样... »

RSS Feed for this Entry.

小桥流水人家评论 2009-01-13 13:08
joe你的皮肤怎么看怎么舒服..

回复
joe 回复一月 13th, 2009 at 17:13
因为自己做的嘛

回复
LD 评论 2009-01-13 18:24
才发现 joe是js牛人阿

回复
joe 回复一月 13th, 2009 at 19:52
没有啦，只是比较喜欢做笔记

回复