实现DIV圆角的js代码和使用方法
这个程序是个用来制作DIV圆角的开源JavaScript代码实现,效果和图像制作圆角一样的.它简单,易用,不用修改任何图像就能做到不同半径圆角....
官方:www.curvycorners.net
---------------------
1、在页面中引用js源文件
< script type="text/JavaScript" src="rounded_corners.js"></script >
2、然后创造一个DIV。如果您已有DIV使用圆角,只要给这个DIV一个id就可以.
< DIV id="myDiv"></DIV >
3、我们需要添加一段JavaScript来预载。在您的网页的顶头部分增加以下代码:
1
<script type="text/JavaScript">
2
window.onload = function() //radius表示半径,数值越大,圆角就越大,各角可以不同大小.
3
{ //tl=左上角 tr=右上角 bl=左下角 br=右下角
4
settings = {
5
tl: { radius: 20 },
6
tr: { radius: 20 },
7
bl: { radius: 20 },
8
br: { radius: 20 },
9
antiAlias: true,
10
autoPad: false
11
}
12![]()
13
var divObj = document.getElementById("myDiv");
14![]()
15
var cornersObj = new curvyCorners(settings, divObj);
16
cornersObj.applyCornersToAll();
17
}
18![]()
19
</script>
<script type="text/JavaScript"> 2
window.onload = function() //radius表示半径,数值越大,圆角就越大,各角可以不同大小.3
{ //tl=左上角 tr=右上角 bl=左下角 br=右下角4
settings = {5
tl: { radius: 20 },6
tr: { radius: 20 },7
bl: { radius: 20 },8
br: { radius: 20 },9
antiAlias: true,10
autoPad: false11
} 12

13
var divObj = document.getElementById("myDiv"); 14

15
var cornersObj = new curvyCorners(settings, divObj);16
cornersObj.applyCornersToAll();17
}18

19
</script>
-------------------------
源示例:demo下载



浙公网安备 33010602011771号