這個程序是個用來制作P圓角的開源javascript代碼實現,效果和圖像制作圓角一樣的.它簡單,易用,不用修改任何圖像就能做到不同半徑圓角….
用這個代碼你可以自由定制自己的DIV,不再是方形了.完全可以實現圓形個性DIV
用法說明:
以下說明將以一個半徑為20像素圓角的DIV為例.
解壓您下載的文件,?上傳到您的站點。然后復制代碼如下和黏貼它入您的網頁的頂頭部分。如果您保存了文件到該網頁目錄外
的任何地方,?修正代碼中的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() ????var?PObj?=?document.getElementById("mydiv");? ????var?cornersObj?=?new?curvyCorners(settings,?divObj); </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=右下角
