基于mootools的圆角边框扩展代码

JQuery下面有个扩展是用纯JS生成的圆角，不过和DIV+CSS拼出来是一样的道理，圆角看上去都比较粗糙。用背景图片要好看得多，问题是不能拉伸，最简单做法就是用四个角小图片加边框拼出来。不过这样多出N多图片，一堆乱七八糟的代码，相当不爽。有一个很有技巧的方法，用一张大图片+CSS来做，原理如下。用一张大的背景图片做圆角，用CSS分别取四个角和边再拼成一个DIV。这样不仅可以解决圆角，还可以生成其它特殊的边框（比如阴影）。但是每次使用都要加CSS也很不爽，于是用mootools写了一个Element类的扩展。复制代码代码如下: setBorder Element.implement({ setBorder: function(pic, len) { /// <summary> /// 设定容器边框（图片）. /// 已测div /// </summary> /// <param name="pic">图片地址</param> /// <param name="len">边框宽度</param> /// <returns type="Element" /> var content = this.clone(); var width = this.getSize().x + len * 2; var height = this.getSize().y + len * 2; this.empty().setStyles({ 'width': width, 'height': height }); var lt = new Element('div', { 'styles': { 'width': len, 'height': len, 'float': 'left', 'background': 'url(' + pic + ') no-repeat left top' } }); var rt = new Element('div', { 'styles': { 'width': width - len, 'height': len, 'float': 'left', 'background': 'url(' + pic + ') no-repeat right top' } }); var lb = new Element('div', { 'styles': { 'width': len, 'height': height - len, 'float': 'left', 'background': 'url(' + pic + ') no-repeat left bottom' } }); var rb = new Element('div', { 'styles': { 'width': width - len, 'height': height - len, 'float': 'left', 'background': 'url(' + pic + ') no-repeat right bottom' } }); content.inject(rb, 'top'); lt.inject(this, 'top'); rt.injectBottom(this); lb.injectBottom(this); rb.injectBottom(this); return this; } }); 这样在页面上直接调用setBorder方法传个背景图片，边框宽度进去就行了。 HTML代码复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>Untitled Page</title> <script type="text/javascript" src="mootools.js"></script> <script type="text/javascript"> Element.implement({ setBorder: function(pic, len) { /// <summary> /// 设定容器边框（图片）. /// 已测div /// </summary> /// <param name="pic">图片地址</param> /// <param name="len">边框宽度</param> /// <returns type="Element" /> var content = this.clone(); var width = this.getSize().x + len * 2; var height = this.getSize().y + len * 2; this.empty().setStyles({ 'width': width, 'height': height }); var lt = new Element('div', { 'styles': { 'width': len, 'height': len, 'float': 'left', 'background': 'url(' + pic + ') no-repeat left top' } }); var rt = new Element('div', { 'styles': { 'width': width - len, 'height': len, 'float': 'left', 'background': 'url(' + pic + ') no-repeat right top' } }); var lb = new Element('div', { 'styles': { 'width': len, 'height': height - len, 'float': 'left', 'background': 'url(' + pic + ') no-repeat left bottom' } }); var rb = new Element('div', { 'styles': { 'width': width - len, 'height': height - len, 'float': 'left', 'background': 'url(' + pic + ') no-repeat right bottom' } }); content.inject(rb, 'top'); lt.inject(this, 'top'); rt.injectBottom(this); lb.injectBottom(this); rb.injectBottom(this); return this; } }); window.addEvent('domready', function() { $('demo').getElements('div').each(function(d) { d.setBorder('border.png', 8); }); }); </script> </head> <body> <div id="demo"> <div style="width:150px; height:100px;"> <div style="width:100%; height:100%; background-color:Red;"></div> </div> <div style="width:80px; height:130px;"> <div style="width:100%; height:100%; background-color:Green;"></div> </div> </div> </body> </html> 显显示效果mootools边框demo http://demo.jb51.net/js/mootools_yj/demo.htm打包下载 Untitled Page 需要刷新一下才能加载外部js框架 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]以前用Jquery也写过一个，居然找不着了，不过原理是一样的。

　　推荐阅读

　　jquery 图片Silhouette Fadeins渐显效果

我的乐队有几个朋友刚刚经历了一场小型的成员阵容的变化。他们需要更换其主页上的照片。我想这可能是有趣的事情出现了少许的互动。这可能有不少方法可以做到这个效果，这一个刚刚进入我的头突然出现，我随>>>详细阅读

本文标题：基于mootools的圆角边框扩展代码

地址：http://www.17bianji.com/kaifa2/JS/27124.html

1/2 1