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:
"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:
{
background-color : blue ;
width : 200px ;
height : 100px ;
}
我们现在看一下他的源代码,然后解析一下其属性方法的使用:(源代码不进行粘贴)
1. 我们看到jquery提供函数所表示的形态有:
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/