调用方法非常简单,首先我们要去官网下载这个插件
官网下载地址: http://curvycorners.googlecode.com/files/curvycorners-2.1.z ip
它的应用场景是这样的,假设我们现在有一个长方形的DIV,那么我们只要引入curvycorners.js,
like this:
<scripttype="text/JavaScript"src="../curvycorners.src.js"></script>
<scripttype="text/JavaScript">
curvyCorners.addEvent(window, 'load',initCorners); //触发事件,调用initCorners方法
function initCorners(){
var settings ={//圆角设置
tl: { radius: 20},//左上圆角半径
tr: { radius: 20},//右上圆角半径
bl: { radius: 20},//左下圆角半径
br: { radius: 20},//右下圆角半径
antiAlias:true//圆角部分的状态 true:完美圆角false:失真圆角
}
curvyCorners(settings, "#myBox"); //操作对象为id="myBox"的DIV
</script>
基本的调用就是这样,下面我们说一下多种调用方式
我们可以使用
var divObj =document.getElementByIdx_x("myDiv");
curvyCorners(settings,divObj);
或者直接
curvyCorners(settings,'#myDiv');
如果是,我们可以这样调用
curvyCorners(settings,'.myDiv');
这样我们就可以将圆角应用在多个地方,另外还有一种方法:
curvyCorners(settings,#myDiv1,.cl1,.cl2,.cl3);
然后,我们发现这一句是在加载方法
curvyCorners.addEvent(window, 'load',initCorners);
同样,我们也可以使用jQuery代替它,使DOM树加载完之后就出现效果,而不是window.onload
$(document).ready(function(){
initCorners();
}) //注意不要忘了引入jQuery.js
这个js插件确实不错,连背景图也能生成圆角,
