生成圆角的 jquery 插件

来源:互联网 发布:淘宝店铺身份证被盗用 编辑:程序博客网 时间:2024/05/29 15:40

圆角效果 圆角效果

生成圆角的 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
原创粉丝点击