回首页 ◎ 设为首页  
◎ 收藏本站  
◎ 联系我们  
  首 页  网络资讯  教程资料  免费资源  建站指南  休闲娱乐  经典整站  访客留言  
  当前位置:首 页 >> 教程资料 >> 网页制作 >> 简易实现DIV圆角的JavaScript代码
最 新 推 荐
淘宝网店“设计装修”..推荐
网页制作常见105个问..推荐
使用FrontPage2000注..推荐
网页制作常用代码推荐
颜色代码大全推荐
热 门 排 行
北京奥运会倒计时代码
如何在网页中插入Flas..
网页自动点击广告代码
星空动态星空背景特效..
如何用Frontpage下载..
网页两侧浮动广告代码
离开时自动提示设为首页
颜色代码大全推荐
怎么使网页跳转地址栏..
站长常用广告代码的表..
淘宝网店“设计装修”..推荐
在网页上设计飘动广告
网页制作常用代码推荐
网页常用特效整理:高..
网页制作常见105个问..推荐
使用css设置iframe样式
最 近 更 新
CSS在表格边框上的美..
Flash文件中多个swf调..
圆角边框的代码
股票即时行情查询系统
万能音.视频在线转换..
仿3721窗口拖动的代码
美化的GOOGLE广告代码
修改discuz5.5,让广..
一些所谓的CSS的“顶..
中英文双语导航菜单
广 告 位 置
站 内 搜 索
关键词

搜索方式

搜索范围

精确匹配
简易实现DIV圆角的JavaScript代码

来源:盛绿设计 等级:默认等级
发布于2007-02-11 21:56 被读38次 【字体:

  这个程序是个用来制作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=右下角


相关专题:暂无相关专题

上一篇:影响SEO的页面制作细节
下一篇:网页JS调用具体方法与步骤(完全版)

共有评论 0 条 网友评分 0分 查看全部

【发表评论】 评分:1分 2分 3分 4分 5分


Powered By Www.Xydw.COM Ver1.14 管理
Copyright © 2004-2005 盛绿设计 All Right Reserved. XCMS
冀ICP备06026128号