生成圆角的 jquery 插件

圆角效果 圆角效果

生成圆角的 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 >

< />
< 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 
= ""+(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 
= ""+(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
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值