繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 基于mootools的圆角边框扩展代码
- Javascript
- JavaScript 语言精粹学习笔记
- 有关div页面拖动、缩放、关闭、遮罩效果代码
- JQuery this 和 $(this) 的区别
- JS 时间显示效果代码
- jquery 表单进行客户端验证demo
- JS 获取span标签中的值的代码 支持ie与firefox
- JavaScript 获取用户客户端操作系统版本
- 可以读取EXCEL文件的js代码
- JS去除字符串的空格增强版(可以去除中间的空格)
- 监控用户是否关闭浏览器的js代码
- javascript 继承实现方法
- JSON 入门指南 想了解json的朋友可以看下
- javascript 函数调用规则
- 动态表格Table类的实现
- JSON 客户端和服务器端的格式转换
- jQuery ui1.7 dialog只能弹出一次问题
- javascript 遍历验证所有文本框的值
- 关于IE、Firefox、Opera页面呈现异同 写脚本很痛苦
- javascript 简练的几个函数
- csdn 博客中实现运行代码功能实现
Javascript 中的 基于mootools的圆角边框扩展代码
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2010-02-27 浏览: 308 ::
收藏到网摘: n/a
做圆角边框一般有两种方法，背景图片或者DIV+CSS拼出来。 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.ruanchen.com/"http://sh.ruanchen.com/" style="color: #000">打包下载
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]
以前用Jquery也写过一个，居然找不着了，不过原理是一样的。
评论 (0) All
