盒子(Box)中间的链接(Links),基于MooTools or jQuery
盒子中间的链接,这个标题不知道如何取比较合适,说白了就是给一个Box 模块中间加一个有遮罩效果和悬停效果的超链接,当我们的鼠标移到盒子上面有一个醒目的链接按钮,反之,链接按钮消失并移除。
接下来,我们看一下效果图吧,比较直观一些。
我们的目标
我们这里有一些包含内容的盒子。
这个目标就是: 当我们的鼠标移到盒子上面,他们会变暗并在他们的中心位置出现一个链接按钮。
注意:
此实例的教程来自: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' }); }); |
内容不错,我来支持一下。我的网站:http://535300.tk,欢迎来踩
要经常光顾呀! 欢迎拍砖.
有点道理
郁闷 怎么上次的留言没显示出来呢? 请问是怎么回事呀 谢谢
你的网名有点怪,我这儿系统会认为是垃圾评论的!我希望给大家提供一个好的交流环境。