這個(gè)程序是個(gè)用來(lái)制作P圓角的開(kāi)源javascript代碼實(shí)現(xiàn),效果和圖像制作圓角一樣的.它簡(jiǎn)單,易用,不用修改任何圖像就能做到不同半徑圓角….
用這個(gè)代碼你可以自由定制自己的DIV,不再是方形了.完全可以實(shí)現(xiàn)圓形個(gè)性DIV
用法說(shuō)明:
以下說(shuō)明將以一個(gè)半徑為20像素圓角的DIV為例.
實(shí)現(xiàn)div圓角的JavaScript代碼.rar
解壓您下載的文件, 上傳到您的站點(diǎn)。然后復(fù)制代碼如下和黏貼它入您的網(wǎng)頁(yè)的頂頭部分。如果您保存了文件到該網(wǎng)頁(yè)目錄外
的任何地方, 修正代碼中的src值.
===代碼:
< script type="text/javascript" src="rounded_corners.js"></script >
——————————B
然后創(chuàng)造一個(gè)div。如果您已有div使用圓角,只要給這個(gè)div一個(gè)id就可以.
===代碼:
< div id="mydiv"></div >
——————————C
最后我們需要添加一段javascript來(lái)預(yù)載。在您的網(wǎng)頁(yè)的頂頭部分增加以下代碼:
|
以下是引用片段： <script type="text/javascript"> window.onload = function() var PObj = document.getElementById("mydiv"); var cornersObj = new curvyCorners(settings, divObj); </script> |
======== 其中,radius表示半徑,數(shù)值越大,圓角就越大.
————————————D
現(xiàn)在可以運(yùn)行了.呵呵
———————————–PS:
*********如果你想搞成奇形怪狀的圓角,你可以設(shè)置每個(gè)角都不同的半徑.
例如:
|
以下是引用片段： 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=右下角
