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
posted @ 2011-06-22 18:55  Mr-sniper  阅读(1114)  评论(0)  编辑  收藏  举报