DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 實現DIV圓角的JavaScript代碼
實現DIV圓角的JavaScript代碼
編輯:關於JavaScript     

這個程序是個用來制作P圓角的開源javascript代碼實現,效果和圖像制作圓角一樣的.它簡單,易用,不用修改任何圖像就能做到不同半徑圓角....
用這個代碼你可以自由定制自己的DIV,不再是方形了.完全可以實現圓形個性DIV

用法說明:

以下說明將以一個半徑為20像素圓角的DIV為例.

實現div圓角的JavaScript代碼.rar


解壓您下載的文件, 上傳到您的站點。然後復制代碼如下和黏貼它入您的網頁的頂頭部分。如果您保存了文件到該網頁目錄外

的任何地方, 修正代碼中的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()
  {
    settings = {
      tl: { radius: 20 },
      tr: { radius: 20 },
      bl: { radius: 20 },
      br: { radius: 20 },
      antiAlias: true,
      autoPad: false
    } 

    var PObj = document.getElementById("mydiv"); 

    var cornersObj = new curvyCorners(settings, divObj);
    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=右下角

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved