圆角效果
生成圆角的 jquery 插件
代码提取于 thickbox
网址
http://jquery.com/demo/thickbox/
jquery-latest.pack.js 下载地址
http://jquery.com/src/jquery-latest.pack.js
插件代码下载
http://download1.csdn.net/down3/20070623/23162012797.html
<
script
type
="text/javascript"
src
="jquery-latest.pack.js"
></
script
>
< style type ="text/css" > ...
<!--
html, body {...}{
min-height: 100%;
height: auto !important;
height: 100%;
background:#ffffff;
text-align:center;
}
.GGGcontainer
{...}{
background: #970F00;
width:300px;
hei
margin-bottom:20px;
color:#fff;
clear:both;
}
-->
</ style >
< div class ="GGGcontainer" >
< p > ynjob.net </ p >
< p > ynjob.net </ p >
< p > ynjob.net </ p >
</ div >
< p />
< div class ="GGGcontainer" >
< p > test </ p >
< p > test </ p >
< p > test </ p >
</ div >
< script type ="text/javascript" > ...
$(document).ready(function()...{
$('div.GGGcontainer').corner('round bottom 9px'); //设定圆角 下方
$('div.GGGcontainer').corner('round top 9px'); //设定圆角 上方
});
/// 圆角 的jquery 插件
$.fn.corner = function(o)
...{
o = o || "";
var width = parseInt((o.match(/(d+)px/)||[])[1]) || 10;
var fx = (o.match(/round|bevel|fold|notch/)||["round"])[0];
var opts = ...{
TL: /top|tl/i.test(o), TR: /top|tr/i.test(o),
BL: /bottom|bl/i.test(o), BR: /bottom|br/i.test(o)//,
};
if ( !opts.TL && !opts.TR && !opts.BL && !opts.BR )
opts = ...{ TL:1, TR:1, BL:1, BR:1 };
var strip = document.createElement("div");
strip.style.overflow = "hidden";
strip.style.height = "1px";
strip.style.backgroundColor = "transparent";
strip.style.borderStyle = "solid";
return this.each(function()...{
var pad = ...{
T: parseInt($.css(this,"paddingTop"))||0,
R: parseInt($.css(this,"paddingRight"))||0,
B: parseInt($.css(this,"paddingBottom"))||0,
L: parseInt($.css(this,"paddingLeft"))||0
};
strip.style.borderColor = "#ffffff";
if ( opts.TL || opts.TR ) ...{
strip.style.borderStyle = "none "+(opts.TR?"solid":"none")+" none "+(opts.TL?"solid":"none");
var t=document.createElement("div");
t.style.margin = "-"+pad.T+"px -"+pad.R+"px "+(pad.T-width)+"px -"+pad.L+"px";
t.style.backgroundColor = "transparent";
for ( var i=0; i < width; i++ ) ...{
var w = fx=="round" ? Math.round(width*(1-Math.cos(Math.asin(i/width)))) : i+1;
var e = strip.cloneNode(false);
e.style.borderWidth = "0 "+(opts.TR?w:0)+"px 0 "+(opts.TL?w:0)+"px";
t.insertBefore(e, t.firstChild);
}
this.insertBefore(t, this.firstChild);
}
if ( opts.BL || opts.BR ) ...{
strip.style.borderStyle = "none "+(opts.BR?"solid":"none")+" none "+(opts.BL?"solid":"none");
var b=document.createElement("div");
b.style.margin = (pad.B-width)+"px -"+pad.R+"px -"+pad.B+"px -"+pad.L+"px";
b.style.backgroundColor = "transparent";
for ( var i=0; i < width; i++ ) ...{
var w = fx=="round" ? Math.round(width*(1-Math.cos(Math.asin(i/width)))) : i+1;
var e = strip.cloneNode(false);
e.style.borderWidth = "0 "+(opts.BR?w:0)+"px 0 "+(opts.BL?w:0)+"px";
b.appendChild(e);
}
this.appendChild(b);
}
});
};
</ script >
< style type ="text/css" > ...
<!--
html, body {...}{
min-height: 100%;
height: auto !important;
height: 100%;
background:#ffffff;
text-align:center;
}
.GGGcontainer
{...}{
background: #970F00;
width:300px;
hei
margin-bottom:20px;
color:#fff;
clear:both;
}
-->
</ style >
< div class ="GGGcontainer" >
< p > ynjob.net </ p >
< p > ynjob.net </ p >
< p > ynjob.net </ p >
</ div >
< p />
< div class ="GGGcontainer" >
< p > test </ p >
< p > test </ p >
< p > test </ p >
</ div >
< script type ="text/javascript" > ...
$(document).ready(function()...{
$('div.GGGcontainer').corner('round bottom 9px'); //设定圆角 下方
$('div.GGGcontainer').corner('round top 9px'); //设定圆角 上方
});
/// 圆角 的jquery 插件
$.fn.corner = function(o)
...{
o = o || "";
var width = parseInt((o.match(/(d+)px/)||[])[1]) || 10;
var fx = (o.match(/round|bevel|fold|notch/)||["round"])[0];
var opts = ...{
TL: /top|tl/i.test(o), TR: /top|tr/i.test(o),
BL: /bottom|bl/i.test(o), BR: /bottom|br/i.test(o)//,
};
if ( !opts.TL && !opts.TR && !opts.BL && !opts.BR )
opts = ...{ TL:1, TR:1, BL:1, BR:1 };
var strip = document.createElement("div");
strip.style.overflow = "hidden";
strip.style.height = "1px";
strip.style.backgroundColor = "transparent";
strip.style.borderStyle = "solid";
return this.each(function()...{
var pad = ...{
T: parseInt($.css(this,"paddingTop"))||0,
R: parseInt($.css(this,"paddingRight"))||0,
B: parseInt($.css(this,"paddingBottom"))||0,
L: parseInt($.css(this,"paddingLeft"))||0
};
strip.style.borderColor = "#ffffff";
if ( opts.TL || opts.TR ) ...{
strip.style.borderStyle = "none "+(opts.TR?"solid":"none")+" none "+(opts.TL?"solid":"none");
var t=document.createElement("div");
t.style.margin = "-"+pad.T+"px -"+pad.R+"px "+(pad.T-width)+"px -"+pad.L+"px";
t.style.backgroundColor = "transparent";
for ( var i=0; i < width; i++ ) ...{
var w = fx=="round" ? Math.round(width*(1-Math.cos(Math.asin(i/width)))) : i+1;
var e = strip.cloneNode(false);
e.style.borderWidth = "0 "+(opts.TR?w:0)+"px 0 "+(opts.TL?w:0)+"px";
t.insertBefore(e, t.firstChild);
}
this.insertBefore(t, this.firstChild);
}
if ( opts.BL || opts.BR ) ...{
strip.style.borderStyle = "none "+(opts.BR?"solid":"none")+" none "+(opts.BL?"solid":"none");
var b=document.createElement("div");
b.style.margin = (pad.B-width)+"px -"+pad.R+"px -"+pad.B+"px -"+pad.L+"px";
b.style.backgroundColor = "transparent";
for ( var i=0; i < width; i++ ) ...{
var w = fx=="round" ? Math.round(width*(1-Math.cos(Math.asin(i/width)))) : i+1;
var e = strip.cloneNode(false);
e.style.borderWidth = "0 "+(opts.BR?w:0)+"px 0 "+(opts.BL?w:0)+"px";
b.appendChild(e);
}
this.appendChild(b);
}
});
};
</ script >
hegz :
不需要从thickbox提取代码这么麻烦,你不知道jQuery有一个圆角插件吗?
http://methvin.com/jquery/jq-corner-demo.html
http://methvin.com/jquery/jq-corner-demo.html