简易实现DIV圆角的JavaScript代码

时间:2008-10-06 10:44:41  来源:第二电脑网上收集  作者:

  第二电脑网导读:"2">用法说明:以下说明将以一个半径为20像素圆角的DIV为例.------------------------------A解压您下载的文件, 上传到您的站点。然后复制代码如下和黏贴它入您的网页的顶头部分。如果您保存了文件到该网页目录外的任何地方, 修正代码中的src值.===代码:< script type="text/javascript" sr...
  正文:

>这个程序是个用来制作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
现在可以运行了.呵呵

-----------------------------------photoshop/ target=_blank class=infotextkey>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=右下角

"简易实现DIV圆角的JavaScript代码"由第二电脑网原创提供,转载请注明:http://www.002pc.com/master/College/Page/css/2008-10-06/1913.html


关键字:

关于《简易实现DIV圆角的JavaScript代码》文章的评论

站内搜索: 高级搜索

热门搜索: Windows style 系统 tr IP QQ CPU 安装 function 注册 if td