相关文章
细数!一夜成名的十大网络红人
北京网页设计子类列表生成多余的DIV代码的解决办法
企通互联为你的网页做出电影的过场效果
北京网站设计避免页面布局被大尺寸图片和长字符串破坏
网站建设在Dreamweaver中插入有颜色的直线
网站制作Dreamweaver MX 2004 行为之显示弹出菜单
网站设计Ultradev实例教程:6 Ultradev使用心得
北京网站设计动感球体
网站设计dreamweaver mx教程十一:移动布局单元格和表格及调整它们的大小
网站建设用好href的target属性
品牌理念
北京网站建设最佳合作伙伴
北京网站建设专家企通互联
竭诚为您提供网站建设服务!
友好连接
文章搜索
你的位置：首页 >> 网站制作 >> 网站制作网站设计简易实现DIV圆角的JavaScript代码
网站制作网站设计简易实现DIV圆角的JavaScript代码
 |
北京网站制作这个程序是个用来制作DIV圆角的开源javascript代码实现,效果和图像制作圆角一样的.它简单,易用,不用修改任何图像就能做到不同半径圆角....企通互联
用这个代码你可以自由定制自己的DIV,不再是方形了.完全可以实现圆形个性DIV
用法说明:网站建设
企通互联
以下说明将以一个半径为20像素圆角的DIV为例.北京网站设计
www.qitongnet.com
------------------------------A北京网站建设
解压您下载的文件, 上传到您的站点。然后复制代码如下和黏贴它入您的网页的顶头部分。如果您保存了文件到该网页目录外 网站设计北京网站制作
企通互联
的任何地方, 修正代码中的src值.网站建设
===代码:北京网站设计
< script type="text/javascript" src="rounded_corners.js"></script > 北京网站制作
www.qitongnet.com
------------------------------Bwww.qitongnet.com
然后创造一个DIV。如果您已有DIV使用圆角,只要给这个DIV一个id就可以.北京网站建设
=== 网站制作代码:网站制作
< DIV id="myDiv"></DIV > 北京网页设计北京网站建设
网站制作
------------------------------C北京网站制作
最后我们需要添加一段javascript来预载。在您的网页的顶头部分增加以下代码:网站建设
网站设计
企通互联
以下是引用片段：网页设计
<script type="text/javascript"> 网页设计
企通互联
window.onload = function() www.qitongnet.com
{ www.qitongnet.com
settings = { 网页设计
tl: { radius: 20 }, 北京网站设计
tr: { radius: 20 }, 北京网站建设网页设计
bl: { radius: 20 }, www.qitongnet.com
br: { radius: 20 }, 企通互联
antiAlias: true, www.qitongnet.com
autoPad: false 北京网站制作
} 网站建设网站制作
网站建设
var divObj = document.getElementById("myDiv"); 北京网站建设
企通互联
var cornersObj = new curvyCorners(settings, divObj); 北京网页设计
cornersObj.applyCornersToAll(); 企通互联
} 企通互联
网页设计
</script>
======== 其中,radius表示半径,数值越大,圆角就越大.网页设计
------------------------------------D北京网页设计
现在可以运行了.呵呵 www.qitongnet.com网页设计
北京网页设计
-----------------------------------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调用XML制作连动下拉框
下一篇：北京网页设计收集整理些有用的JAVASCRIPT小知识