简易实现DIV圆角的JavaScript代码

这个程序是个用来制作DIV圆角的开源javascript代码实现,效果和图像制作圆角一样的.它简单,易用,不用修改任何图像就能做到不同半径圆角....

用这个代码你可以自由定制自己的DIV,不再是方形了.完全可以实现圆形个性DIV

用法说明:

 

以下说明将以一个半径为20像素圆角的DIV为例.

 

------------------------------A

解压您下载的文件, 上传到您的站点。然后复制代码如下和黏贴它入您的网页的顶头部分。如果您保存了文件到该网页目录外

 

的任何地方, 修正代码中的src值.

===代码:

< script type="text/javascript" src="rounded_corners.js"></script > 

 

------------------------------B

然后创造一个DIV。如果您已有DIV使用圆角,只要给这个DIV一个id就可以.

===代码:

         < DIV id="myDiv"></DIV >

 

------------------------------C

最后我们需要添加一段javascript来预载。在您的网页的顶头部分增加以下代码:

 

 

以下是引用片段：

<script type="text/javascript"> 

 

  window.onload = function()

  {

    settings = {

      tl: { radius: 20 },

      tr: { radius: 20 },

      bl: { radius: 20 },

      br: { radius: 20 },

      antiAlias: true,

      autoPad: false

    } 

 

    var divObj = document.getElementById("myDiv"); 

 

    var cornersObj = new curvyCorners(settings, divObj);

    cornersObj.applyCornersToAll();

  }

 

</script> 

======== 其中,radius表示半径,数值越大,圆角就越大.

 

------------------------------------D

现在可以运行了.呵呵

 

-----------------------------------PS:

*********如果你想搞成奇形怪状的圆角,你可以设置每个角都不同的半径.

例如:

 

以下是引用片段：

settings = {

      tl: { radius: 20 },

      tr: { radius: 40 },

      bl: { radius: 60 },

      br: { radius: 80 },

      antiAlias: true,

      autoPad: false

 

    }

或者:

settings = {

      tl: { radius: 20 },

      tr: false,

      bl: false,

      br: { radius: 80 },

      antiAlias: true,

      autoPad: false

    } 

 

提示: tl-左上角  tr=右上角  bl=左下角  br=右下角

 

 

声明：此文章来源于网络，如果侵犯到您的权利，请电邮我(dushizhuma(a)163.com)，我将在第一时间内删除此文章并送出我的歉意！