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
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值