盒子(Box)中间的链接(Links),基于MooTools or jQuery

盒子中间的链接,这个标题不知道如何取比较合适,说白了就是给一个Box 模块中间加一个有遮罩效果和悬停效果的超链接,当我们的鼠标移到盒子上面有一个醒目的链接按钮,反之,链接按钮消失并移除。

接下来,我们看一下效果图吧,比较直观一些。


middle box links

 

View Demos »

 

我们的目标

我们这里有一些包含内容的盒子。

这个目标就是: 当我们的鼠标移到盒子上面,他们会变暗并在他们的中心位置出现一个链接按钮。

注意:

此实例的教程来自:Middle Box Links ,它是jQuery 版的,有完整的教程。我就不多说了。我在这儿只把它实现为 MooTools 版。

作者:Chris Coyier

The HTML Code :

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>

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

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

使用方法:

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

 

View Demos »

站点统计