简单的颜色选项卡,基于CSS and MooTools

你想在200秒内切换颜色吗?使用MooTools很容易实现的。此例子演示的是通过颜色选项卡,给标题换背景色。当我们的鼠标经过头部的时候会出现一个简单的颜色选项卡,通过它我们可以设置预定的背景色,当鼠标离开头部的时候颜色选项卡是隐藏的效果。这个动作是可以反复执行的。

标题颜色选项卡

 

MooTools Demo

 

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

 

MooTools Demo

 

–The End —

站点统计