如何用Js代码实现DIV圆角?

时间:20-03-07 03:54 责任编辑: admin 来源:电脑吧 点击:

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

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

  用法说明:

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

  实现div圆角的JavaScript代码.rar

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

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

  ===代码:

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

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

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

  ===代码:

  < div id="mydiv">

 

 

  ------------------------------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 PObj = 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=右下角

    最新更新

    视觉焦点

    新闻排行

    1. WinXP怎么样防止匿名用户登录?
    2. Winxp删除用户之后加密文件打不开怎么办?
    3. Win XP桌面快捷键变成.lnk文件如何解决?
    4. 怎么样删除IE工具栏上其他网站链接呢?
    5. Winxp系统netcfg.hlp文件丢失找不到如何解决?
    6. WinXP桌面图标存在着蓝色阴影如何修复?
    7. XP电脑文件名变成蓝色了怎么回事?
    8. winxp如何取消开机磁盘扫描?
    9. 解决activex部件不能创建对象的两个办法
    10. xp系统出现“无法识别的USB设备”如何解决?