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>
"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;
}
{
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
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/
以上只是一个模板的圆角效果，仅供参考！