源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

代码精简的可以实现元素圆角的js函数

  • 时间:2020-08-07 07:47 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:代码精简的可以实现元素圆角的js函数
上次在blueidea上看到一个元素圆角的实现方法,但是那个太复杂了。于是就自己写了一个函数,可以将元素自动圆角。  演示地址:http://longbill.cn/down/sample/roundcorner.htm  不要用在有 padding 值得元素上,最好是在外面套一层。详情见演示地址。  代码:  function RoundCorner(obj,style)  {  /********  网页元素圆角函数!!  作者: Longbill  主页: www.longbill.cn  ********/         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"]}         ]; //author: longbill.cn         if (!style || style>styles.length) style = 1;         style--;         var btop = styles[style].top,bbottom = styles[style].bottom;         obj = document.getElementById(obj);         if (!obj) return;         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 = (obj.parentNode.style.backgroundColor)?obj.parentNode.style.backgroundColor:"#FFFFFF";                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;         }  }
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部