用DIV实现圆角的JavaScript程序

时间:2012-12-19 23:53 来源:未知作者:熊猫蜀黍点击:次

以下说明将以一个半径为20像素圆角的DIV为例.
然后复制代码如下和黏贴它入您的网页的顶头部分。如果您保存了文件到该网页目录外的任何地方, 修正代码中的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=右下角

(责任编辑：熊猫蜀黍)

上一篇：名词解释:JavaScript、Jscript、VBScript、ASP
下一篇：JavaScript基本数据类型

用DIV实现圆角的JavaScript程序

时间:2012-12-19 23:53 来源:未知 作者:熊猫蜀黍 点击:次

时间:2012-12-19 23:53 来源:未知作者:熊猫蜀黍点击:次