首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

元素圆角的兑现

2012-11-23 
元素圆角的实现function RoundCorner(obj,style){var r []var styles [{top:[0 5px,0 3px,0 2px

元素圆角的实现

  function RoundCorner(obj,style)  {    var r = [];    var styles = [      {top:["0 5px","0 3px","0 2px","0 1px","0 1px"],bottom:["0 1px","0 1px","0 2px","0 3px","0 5px"]},      {top:["0 5px","0 3px","0 2px","0 1px","0 1px"],bottom:["0px","0px","0px","0px","0px"]},      {top:["0 0 0 5px","0 0 0 3px","0 0 0 2px","0 0 0 1px","0 0 0 1px"],bottom:["0 1 0 0px","0 1 0 0px","0 2 0 0px","0 3 0 0px","0 5 0 0px"]},      {top:["0 5 0 0px","0 3 0 0px","0 2 0 0px","0 1 0 0px","0 1 0 0px"],bottom:["0 0 0 1px","0 0 0 1px","0 0 0 2px","0 0 0 3px","0 0 0 5px"]}    ];     if (!style || style>styles.length) style = 1;    style--;    var btop = styles[style].top,bbottom = styles[style].bottom;    if (typeof obj == "string") obj = document.getElementById(obj);    var objp = obj.parentNode;    if (!obj || !objp) return;    var bg = '';    var cssProperty = "backgroundColor";    var mozillaEquivalentCSS = "background-color";    if (objp.currentStyle)      var actualColor = objp.currentStyle[cssProperty];    else    {      var cs = document.defaultView.getComputedStyle(objp, null);      var actualColor = cs.getPropertyValue(mozillaEquivalentCSS);    }    if (actualColor == "transparent" && objp.parentNode) bg = arguments.callee(objp.parentNode);    else if (actualColor == null) bg = "#ffffff";    else bg = actualColor;    var HTML = obj.innerHTML;    obj.innerHTML = "";    for(var istop=1;istop>=0;istop--)    {      var topborder = document.createElement("b");      topborder.style.display = "block";      topborder.style.height = "2px";      topborder.style.backgroundColor = bg;      for(var i=0;i<btop.length;i++)      {        var b = document.createElement("b");        if (obj.style.backgroundColor)          b.style.backgroundColor = obj.style.backgroundColor;        else if (obj.className)          b.className = obj.className;        b.style.display = "block";        b.style.margin = (istop)?btop[i]:bbottom[i];        b.style.height = "1px";        b.style.overflow = "hidden";        b.style.width = "auto";        topborder.appendChild(b);      }      obj.appendChild(topborder);      if (istop) obj.innerHTML+=HTML;    }  }

?

热点排行