This Domain(Admin5.com) is for Sale:

简易实现DIV圆角的JavaScript代码

时间:2007-12-27  来源:不详  作者:林子

>这个程序是个用来制作DIV圆角的开源javascript代码实现,效果和图像制作圆角一样的.它简单,易用,不用修改任何图像就能做到不同半径圆角....
用这个代码你可以自由定制自己的DIV,不再是方形了.完全可以实现圆形个性DIV 织梦内容管理系统

用法说明:

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

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

的任何地方,修正代码中的src值.
===代码:
<scripttype="text/javascript"src="rounded_corners.js"></script>

------------------------------B
然后创造一个DIV。假如您已有DIV使用圆角,只要给这个DIV一个id就可以.
===代码:
<DIVid="myDiv"></DIV>

------------------------------C
最后我们需要添加一段javascript来预载。在您的网页的顶头部分增加以下代码:

以下是引用片段:
<scripttype="text/javascript">

window.onload=function()
{
settings={
tl:{radius:20},
tr:{radius:20},
bl:{radius:20},
br:{radius:20},
antiAlias:true,
autoPad:false
}

vardivObj=document.getElementById("myDiv");

varcornersObj=newcurvyCorners(settings,divObj);

copyright dedecms

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=右下角
dedecms.com

看完这篇,您有何感觉呢?

文章评论

共有位Admini5网友发表了评论 查看完整内容

24小时热门信息