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;
}

#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; }

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');
    });
 
});

/* 模仿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'); }); });