简单的颜色选项卡,基于CSS and MooTools
你想在200秒内切换颜色吗?使用MooTools很容易实现的。此例子演示的是通过颜色选项卡,给标题换背景色。当我们的鼠标经过头部的时候会出现一个简单的颜色选项卡,通过它我们可以设置预定的背景色,当鼠标离开头部的时候颜色选项卡是隐藏的效果。这个动作是可以反复执行的。
The CSS Code :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | #header { padding: 2em 1em; background-color: #67A54B; color: #FFF; } #header h1 { display: inline; } #colorsContainer { float: right; /*display: none;*/ visibility: hidden; opacity: 0; margin: 0px; } #colorsContainer div { width: 30px; height: 30px; float: left; display: inline; cursor: pointer; } |
The MooTools JavaScript :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | /* 模仿jQuery的hover方法,并扩展到MooTools中 */ Element.implement({ 'hover': function(fn1,fn2) { return this.addEvents({ 'mouseenter': function(e) { fn1.attempt(e,this); }, 'mouseleave': function(e) { fn2.attempt(e,this); } }) } }); //执行 window.addEvent('domready', function() { var colorOptions = 'black, blue, orange, red, orange'.split(', '), colorDivs = [], colorsContainer = $('colorsContainer'); //创建颜色选择项 for ( var i = 0; i < colorOptions.length; i++ ) { var div=new Element('div',{'styles':{'background-color':colorOptions[i]}}); //向数组中添加一项, 如果该项在数组中已经存在,则不再添加. colorDivs.include(div); } //加入颜色盒子 colorsContainer.adopt(colorDivs); // $('header').hover(function() { colorsContainer.fade('in'); //监听各个颜色选择项,并为标题元素设置相应的颜色 colorsContainer.getChildren().addEvent('mouseenter',function(){ $$('h2').setStyle('color', $(this).getStyle('background-color')); }); }, function() { colorsContainer.fade('out'); }); }); |
–The End —
很抱歉看到这里才评论,不是因为懒,而是面对高手我不知道如何去评论,呵呵 我是mootools菜鸟,并且现在还是喜欢jquery的,因为项目的原因所以弄mootools了,看过之后很受启发,谢谢~~
欢迎你拍砖,有空多多交流,大家都在学习中。jQuery 能做的,MooTools 照样也可以做!