curvyCorners详解【一款兼容任何浏览器的生成圆角的js插件】

今天我发现一款非常不错的js插件:curvyCorners(中文名:圆角)

 
  
调用方法非常简单,首先我们要去官网下载这个插件
        官网下载地址: 
http://curvycorners.googlecode.com/files/curvycorners-2.1.zip
   它的应用场景是这样的，假设我们现在有一个长方形的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');   

          如果是class="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