繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 代码精简的可以实现元素圆角的js函数
- Javascript
- JQuery 学习笔记 选择器之四
- JQuery 学习笔记 选择器之五
- JQuery 学习笔记 选择器之六
- JQuery CSS样式控制 学习笔记
- 用js模仿word格式刷功能实现代码 [推荐]
- 运用jquery实现table单双行不同显示并能单行选中
- jqPlot jquery的页面图表绘制工具
- jquery tools之tabs 选项卡/页签
- jquery tools之tooltip
- 浅析Javascript原型继承 推荐
- JQuery UI皮肤定制
- 实现lightBox时的样式与行为分离减少JS
- JQuery 表格操作(交替显示、拖动表格行、选择行等)
- javascript 进度条 实现代码
- Javascript this指针
- jquery imgareaselect 使用利用js与程序结合实现图片剪切
- javascript 写的一个简单的timer
- javascript 处理HTML元素必须避免使用的一种方法
- Javascript 验证上传图片大小[客户端]
- jQuery 隔行换色 支持键盘上下键，按Enter选定值
Javascript 中的 代码精简的可以实现元素圆角的js函数
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-12 浏览: 244 ::
收藏到网摘: n/a
上次在blueidea上看到一个元素圆角的实现方法，但是那个太复杂了。于是就自己写了一个函数，可以将元素自动圆角。
演示地址：http://longbill.cn/down/sample/roundcorner.htm
不要用在有 padding 值得元素上，最好是在外面套一层。详情见演示地址。
代码：
function RoundCorner(obj,style)
{
/********
网页元素圆角函数!!
作者: Longbill
主页: www.longbill.cn
********/
var r = [];
var styles = [
{top:["0 5px","0 3px","0 2px","0 1px","0 1px"],bottom:["0 1px","0 1px","0 2px","0 3px","0 5px"]},
{top:["0 5px","0 3px","0 2px","0 1px","0 1px"],bottom:["0px","0px","0px","0px","0px"] },
{top:["0 0 0 5px","0 0 0 3px","0 0 0 2px","0 0 0 1px","0 0 0 1px"],bottom:["0 1 0 0px","0 1 0 0px","0 2 0 0px","0 3 0 0px","0 5 0 0px"]},
{top:["0 5 0 0px","0 3 0 0px","0 2 0 0px","0 1 0 0px","0 1 0 0px"],bottom:["0 0 0 1px","0 0 0 1px","0 0 0 2px","0 0 0 3px","0 0 0 5px"]}
]; //author: longbill.cn
if (!style || style>styles.length) style = 1;
style--;
var btop = styles[style].top,bbottom = styles[style].bottom;
obj = document.getElementById(obj);
if (!obj) return;
var HTML = obj.innerHTML;
obj.innerHTML = "";
for(var istop=1;istop>=0;istop--)
{
var topborder = document.createElement("b");
topborder.style.display = "block";
topborder.style.height = "2px";
topborder.style.backgroundColor = (obj.parentNode.style.backgroundColor)?obj.parentNode.style.backgroundColor:"#FFFFFF";
for(var i=0;i<btop.length;i++)
{
var b = document.createElement("b");
if (obj.style.backgroundColor)
b.style.backgroundColor = obj.style.backgroundColor;
else if (obj.className)
b.className = obj.className;
b.style.display = "block";
b.style.margin = (istop)?btop[i]:bbottom[i];
b.style.height = "1px";
b.style.overflow = "hidden";
b.style.width = "auto";
topborder.appendChild(b);
}
obj.appendChild(topborder);
if (istop) obj.innerHTML+=HTML;
}
}
评论 (0) All
