可以实现元素圆角的函数~
来源:互联网 发布:凸优化优化指标 编辑:程序博客网 时间:2024/05/22 14:23
不要用在有 padding 值得元素上,最好是在外面套一层。
<style>
body {text-align:center; color:#333333; font-size:12px;}
.round{background-color:lightblue;width:200px;margin:5px;display:inline;}
</style>
<div style="width:500px;background-color:#e9afdf;margin:5px;" id=title>
<div style="padding:3px;">
自动圆角函数<br/>
作者:<a href=http://www.longbill.cn target=_blank>Longbill</a>
</div>
</div>
<div class=round id=round1 ><div style="padding:3px;">样式1</div></div>
<div class=round id=round2 ><div style="padding:3px;">样式2</div></div><br/>
<div class=round id=round3 ><div style="padding:3px;">样式3</div></div>
<div class=round id=round4 ><div style="padding:3px;">样式4</div></div>
<div style="width:500px;background-color:#e9afdf;margin:5px;" id=a>
<div style="padding:3px;">
说明:<br/>
RoundCorner("欲圆角的元素ID" [, 圆角样式 ]);<br/>
圆角样式:可选参数,暂时有4种
</div>
</div>
<script>
RoundCorner("round1",1);
RoundCorner("round2",2);
RoundCorner("round3",3);
RoundCorner("round4",4);
RoundCorner("a",1);
RoundCorner("title",1);
function RoundCorner(oContain,idxStyle)
{
var r = [];
var oStyleLst = [
{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 (!idxStyle || idxStyle>oStyleLst.length) idxStyle = 1;
idxStyle--;
oContain = document.getElementById(oContain);
if (!oContain) return;
for (var key in oStyleLst[idxStyle])
{
var topborder = document.createElement("div");
topborder.style.display = "block";
topborder.style.backgroundColor = (oContain.parentNode.style.backgroundColor)?oContain.parentNode.style.backgroundColor:"#FFFFFF";
for (var i=0; i<oStyleLst[idxStyle][key].length; i++)
{
var b = document.createElement("div");
if (oContain.style.backgroundColor)
b.style.backgroundColor = oContain.style.backgroundColor;
else if (oContain.className)
b.className = oContain.className;
b.style.display = "block";
b.style.margin = oStyleLst[idxStyle][key][i];
b.style.height = "1px";
b.style.overflow = "hidden";
b.style.width = "auto";
topborder.appendChild(b);
}
oNode = (key == 'top')?oContain.firstChild:null;
oContain.insertBefore(topborder, oNode);
}
}
</script>
body {text-align:center; color:#333333; font-size:12px;}
.round{background-color:lightblue;width:200px;margin:5px;display:inline;}
</style>
<div style="width:500px;background-color:#e9afdf;margin:5px;" id=title>
<div style="padding:3px;">
自动圆角函数<br/>
作者:<a href=http://www.longbill.cn target=_blank>Longbill</a>
</div>
</div>
<div class=round id=round1 ><div style="padding:3px;">样式1</div></div>
<div class=round id=round2 ><div style="padding:3px;">样式2</div></div><br/>
<div class=round id=round3 ><div style="padding:3px;">样式3</div></div>
<div class=round id=round4 ><div style="padding:3px;">样式4</div></div>
<div style="width:500px;background-color:#e9afdf;margin:5px;" id=a>
<div style="padding:3px;">
说明:<br/>
RoundCorner("欲圆角的元素ID" [, 圆角样式 ]);<br/>
圆角样式:可选参数,暂时有4种
</div>
</div>
<script>
RoundCorner("round1",1);
RoundCorner("round2",2);
RoundCorner("round3",3);
RoundCorner("round4",4);
RoundCorner("a",1);
RoundCorner("title",1);
function RoundCorner(oContain,idxStyle)
{
var r = [];
var oStyleLst = [
{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 (!idxStyle || idxStyle>oStyleLst.length) idxStyle = 1;
idxStyle--;
oContain = document.getElementById(oContain);
if (!oContain) return;
for (var key in oStyleLst[idxStyle])
{
var topborder = document.createElement("div");
topborder.style.display = "block";
topborder.style.backgroundColor = (oContain.parentNode.style.backgroundColor)?oContain.parentNode.style.backgroundColor:"#FFFFFF";
for (var i=0; i<oStyleLst[idxStyle][key].length; i++)
{
var b = document.createElement("div");
if (oContain.style.backgroundColor)
b.style.backgroundColor = oContain.style.backgroundColor;
else if (oContain.className)
b.className = oContain.className;
b.style.display = "block";
b.style.margin = oStyleLst[idxStyle][key][i];
b.style.height = "1px";
b.style.overflow = "hidden";
b.style.width = "auto";
topborder.appendChild(b);
}
oNode = (key == 'top')?oContain.firstChild:null;
oContain.insertBefore(topborder, oNode);
}
}
</script>
- 可以实现元素圆角的函数~
- 数组元素可以作为函数的参数
- 可以自动生成圆角元素的网站
- python函数可以操纵外面的元素和列表吗?
- 大量的用伪元素可以实现的奇妙效果
- 实现接口的函数可以虚函数 抽象函数
- 【LVL1_5_c】【课后练习】【5】 写一个可以倒置数组元素的函数.
- 实现一个可以返回其所存储的最小元素的栈
- 实现一个可以阻塞标准输入的模板函数
- 实现一个可以用于bind2nd的函数对象
- NumPy中的乘法运算符 * 指示按元素计算,矩阵乘法可以使用 dot 函数或创建矩阵对象实现
- jquery子元素选择器、form属性选择器和实现可以左右选择的下拉菜单效果
- 线性表中插入元素的实现,有兴趣可以看一下
- 如下代码可以实现点击页面获得被点击元素的id
- 实现页面元素拖动效果的JS函数
- 函数指针实现通用的数组元素排序
- 定义一个函数,在该函数中可以实现任意两个整数的加法。java实现
- 函数的元素
- Struts+Spring+Hibernate练习(完整)-转贴
- 深入理解C# 3.0的五项主要改进 (LINQ)
- Spring IoC容器-编码方式比较
- 1.1 数据库基础
- 在VC中调用默认的电子邮件程序发送邮件
- 可以实现元素圆角的函数~
- 1.2 什么是SQL
- String.split()的一个奇怪问题
- 设计模式 之 工厂方法
- 愤怒ing,搬家
- 用PHP控制用户浏览器缓存!
- 如何写论文
- 保存PictrueBox绘画后的图片
- 一只鸟与另一只鸟催人泪下的故事