1
2
3
4
5
6
7
8
9
10
11
12
13
14

 <div id="page-wrap">
 
		<div class="widget widget-one rounded">
             盒子一的内容。。。。。。。。。。
        </div>
        <div class="widget widget-two rounded">
             盒子二的内容。。。。。。。。。。
        </div>
        .
        .
        .
        .
        .
 </div>

<div id="page-wrap"> <div class="widget widget-one rounded"> 盒子一的内容。。。。。。。。。。 </div> <div class="widget widget-two rounded"> 盒子二的内容。。。。。。。。。。 </div> . . . . . </div>

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

/*公共样式*/
* { margin: 0; padding: 0; }
body { font: 14px Georgia, serif; background: #333; color: #eee; }
#page-wrap { width: 800px; margin: 20px auto; }
p { margin: 0 0 10px 0; }
 
/*核心样式*/
.rounded { -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; }
 
.widget { width: 300px; padding: 20px; border: 1px solid #999;
          margin: 0 20px 20px 0; float: left; position: relative; }
 
.overlay { 
    position: absolute;top: 0; left: 0; right: 0; bottom: 0;
	background-color:#333;
    background: rgba(0,0,0,0.6);
    text-align: center; 
 
}
 
.widget-button { 
    position: relative;
    padding: 4px 16px; background: black; border: 2px solid white; 
    color: white; text-decoration: none; 
    text-transform: uppercase; -moz-box-shadow: 0 0 20px white; 
    -webkit-box-shadow: 0 0 20px white; box-shadow: 0 0 20px white; 
}
 
.widget-button:hover { color: #fe4902; }

/*公共样式*/ * { margin: 0; padding: 0; } body { font: 14px Georgia, serif; background: #333; color: #eee; } #page-wrap { width: 800px; margin: 20px auto; } p { margin: 0 0 10px 0; } /*核心样式*/ .rounded { -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; } .widget { width: 300px; padding: 20px; border: 1px solid #999; margin: 0 20px 20px 0; float: left; position: relative; } .overlay { position: absolute;top: 0; left: 0; right: 0; bottom: 0; background-color:#333; background: rgba(0,0,0,0.6); text-align: center; } .widget-button { position: relative; padding: 4px 16px; background: black; border: 2px solid white; color: white; text-decoration: none; text-transform: uppercase; -moz-box-shadow: 0 0 20px white; -webkit-box-shadow: 0 0 20px white; box-shadow: 0 0 20px white; } .widget-button:hover { color: #fe4902; }

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
39
40
41
42
43

//实现
var tempBox=new Class({
	Implements: [Options,Events],
	//选项参数
	options: {
		container: false,
		text:"",
		url:""
	},
	//初始化构造函数
	initialize: function(options) {
		//set options
		this.setOptions(options);
		this.init(this.options.text,this.options.url);
	},
	//自定义的js方法
	init: function(text, url) {
		var $el, $tempDiv, $tempButton, divHeight = 0;
 
        this.options.container.addEvents({
			 mouseenter: function() {
			  $el=this.setStyle("border-color", "white");
			  divHeight = $el.getSize().y;
			  $tempDiv =new Element('div',{'class': 'overlay rounded'});
			  $tempButton=new Element('a',{
				 'href': url,
				 'html': text,
				 'class': "widget-button rounded",
				 'styles': {
					'top': (divHeight / 2) - 7 + 'px'
				 }					 					 
			  }).inject($tempDiv);
		      $tempDiv.inject(this);
			 },
			 mouseleave: function() {
			  $el = this.setStyle("border-color", "#999");
              $$('.overlay').fade('out').dispose();
			}
	   });
 
	}
 
});

//实现 var tempBox=new Class({ Implements: [Options,Events], //选项参数 options: { container: false, text:"", url:"" }, //初始化构造函数 initialize: function(options) { //set options this.setOptions(options); this.init(this.options.text,this.options.url); }, //自定义的js方法 init: function(text, url) { var $el, $tempDiv, $tempButton, divHeight = 0; this.options.container.addEvents({ mouseenter: function() { $el=this.setStyle("border-color", "white"); divHeight = $el.getSize().y; $tempDiv =new Element('div',{'class': 'overlay rounded'}); $tempButton=new Element('a',{ 'href': url, 'html': text, 'class': "widget-button rounded", 'styles': { 'top': (divHeight / 2) - 7 + 'px' } }).inject($tempDiv); $tempDiv.inject(this); }, mouseleave: function() { $el = this.setStyle("border-color", "#999"); $$('.overlay').fade('out').dispose(); } }); } });

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

 
window.addEvent('domready',function(){
	 new tempBox({		 
		container:$$('.widget-one'),
		text:'Continue Reading »',
		url:'http://blog.moocss.com/code-snippets/mootools-code-snippets/1338.html'
	 });
 
	 new tempBox({		 
		container:$$('.widget-two'),
		text:'View Demos »',
		url:'http://blog.moocss.com/tutorials/jquery/1331.html'
	 });
 
	 new tempBox({		 
		container:$$('.widget-three'),
		text:'Download Files »',
		url:'http://blog.moocss.com/tutorials/mootools/1327.html'
	 });
 
	 new tempBox({		 
		container:$$('.widget-four'),
		text:'Read More »',
		url:'http://blog.moocss.com/tutorials/jquery/1321.html'
	 });
});

window.addEvent('domready',function(){ new tempBox({ container:$$('.widget-one'), text:'Continue Reading »', url:'http://blog.moocss.com/code-snippets/mootools-code-snippets/1338.html' }); new tempBox({ container:$$('.widget-two'), text:'View Demos »', url:'http://blog.moocss.com/tutorials/jquery/1331.html' }); new tempBox({ container:$$('.widget-three'), text:'Download Files »', url:'http://blog.moocss.com/tutorials/mootools/1327.html' }); new tempBox({ container:$$('.widget-four'), text:'Read More »', url:'http://blog.moocss.com/tutorials/jquery/1321.html' }); });