自动圆角函数

<!doctype html public "-//w3c//dtd html 4.0 transitional//en">

<html><head>
<meta http-equiv=content-type content="text/html; charset=gb2312">
<style>body {
font-size: 12px; color: #333333; text-align: center
}
.round {
display: inline; margin: 5px; width: 200px; background-color: #ccc
}
</style>

</head>
<body>
<div id=title style="margin: 5px; width: 500px; background-color: #e9afdf">
<div
style="padding-right: 3px; padding-left: 3px; padding-bottom: 3px; padding-top: 3px">自动圆角函数<br>作者:<a
href="<a href="http://www.longbill.cn/" target="_blank">http://www.longbill.cn/</a>" target=_blank>longbill</a> </div></div>
<div class=round id=round1>
<div
style="padding-right: 3px; padding-left: 3px; padding-bottom: 3px; padding-top: 3px">样式1</div></div>
<div class=round id=round2>
<div
style="padding-right: 3px; padding-left: 3px; padding-bottom: 3px; padding-top: 3px">样式2</div></div><br>
<div class=round id=round3>
<div
style="padding-right: 3px; padding-left: 3px; padding-bottom: 3px; padding-top: 3px">样式3</div></div>
<div class=round id=round4>
<div
style="padding-right: 3px; padding-left: 3px; padding-bottom: 3px; padding-top: 3px">样式4</div></div>
<div id=a style="margin: 5px; width: 500px; background-color: #e9afdf">
<div
style="padding-right: 3px; padding-left: 3px; padding-bottom: 3px; padding-top: 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(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;
}
}
</SCRIPT>
</BODY></HTML>

posted on 2007-01-12 14:57 mbskys 阅读(162) 评论(0) 收藏举报