先看看效果^_^!
变换的菜单
- 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代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | 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
joe你的皮肤怎么看怎么舒服..
回复
回复
才发现 joe是js牛人阿
回复
回复