jQuery圆角实现

Jquery.coner.js实现圆角

上一篇中css实现圆角的方法用起来虽然也比较爽，但是却加大了页面div的量，使维护和编码的时候相对麻烦不易于控制，幸好我们在巨人的身边成长，技术实现永远都不是问题，以下是基于jquery1.3.2开发的一个圆角插件，作者是:Dave Methvin and Mike Alsup,用法非常简单，源码也非常漂亮简洁、

准备工作：

Jquery1.3.1.js

官方网站：http://jquery.com/

Jquery.coner.js

官方网站: http://www.malsup.com/jquery/corner/

css文件夹 :存放必要的css文件

本文章为原创文章，转载请注明出处:http://www.cnblogs.com/rafx/

Html structure:

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< title > jQuery Corners </ title >
< script type ="text/javascript" src ="jquery-1.3.js" ></ script >
< script type ="text/javascript" src ="jquery.corner.js" ></ script >
< script type ="text/javascript" >
$(document).ready( function () {
$( " .rounded " ).corner( " 30px " );})
alert( ' hello,everyone ' );
</ script >
</ head >

< body >
< div style ="" class ="rounded" >
< span style ="color:white" > class="rounded" </ span >
</ div >
</ body >
</ html >

css code:

.rounded
{
background-color : blue ;
width : 200px ;
height : 100px ;
}

 

我们现在看一下他的源代码，然后解析一下其属性方法的使用:(源代码不进行粘贴)

1. 我们看到jquery提供函数所表示的形态有：

case ' round ' : return Math.round(width * ( 1 - Math.cos(Math.asin(i / width))));

case ' cool ' : return Math.round(width * ( 1 + Math.cos(Math.asin(i / width))));

case ' sharp ' : return width - i;

case ' bite ' : return Math.round(width * (Math.cos(Math.asin((width - i - 1 ) / width))));

case ' slide ' : return Math.round(width * (Math.atan2(i,width / i)));

case ' jut ' : return Math.round(width * (Math.atan2(width,(width - i - 1 ))));

case ' curl ' : return Math.round(width * (Math.atan(i)));

case ' tear ' : return Math.round(width * (Math.cos(i)));

case ' wicked ' : return Math.round(width * (Math.tan(i)));

case ' long ' : return Math.round(width * (Math.sqrt(i)));

case ' sculpt ' : return Math.round(width * (Math.log((width - i - 1 ),width)));

case ' dogfold ' :

case ' dog ' : return (i & 1 ) ? (i + 1 ) : width;

case ' dog2 ' : return (i & 2 ) ? (i + 1 ) : width;

case ' dog3 ' : return (i & 3 ) ? (i + 1 ) : width;

case ' fray ' : return (i % 2 ) * width;

case ' notch ' : return width;

case ' bevelfold ' :

case ' bevel ' : return i + 1 ;

case ' steep ' : return i / 2 + 1;

case ' invsteep ' : return (width - i) / 2+1

 

2.其中默认的方法为：

 

$(this).corner();




所表达的样式为round圆角形式的

3.其中作者还提供了top bottom left right t1 tr bl br 去定义指定圆角的样式：

 

$(this).corner("bevel top");




4.还可以利用像素去制定圆角的尺寸：

 

$(this).corner("30px");




5.当然你可以选择混搭的样式(mix and match)

用法:

 

$(this).corner( "bottom").corner("top bevel");




6.是用嵌套的样式丰富效果:

 

$(this).corner("round 8px").parent().css('padding', '4px').corner("round 10px")

效果缩略图：

 

更多功能请访问官方网站: http://www.malsup.com/jquery/corner/

 以上只是一个模板的圆角效果，仅供参考！

  qq:313247313
 Email:rafx.z@hotmail.com
 新浪微博: Mr-sniper

转载于:https://www.cnblogs.com/rafx/archive/2011/06/22/jqueryCorner.html