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

lihui2651

lihui2651

2016-02-19 09:18

下面图老师小编跟大家分享一个简单易学的代码精简的可以实现元素圆角的js函数教程,get新技能是需要行动的,喜欢的朋友赶紧收藏起来学习下吧!
上次在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 || stylestyles.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;ibtop.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; 
       } 
}
展开更多 50%)
分享

猜你喜欢

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

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

比较精简的Javascript拖动效果函数代码

Web开发
比较精简的Javascript拖动效果函数代码

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

js中的escape及unescape函数的php实现代码

Web开发
js中的escape及unescape函数的php实现代码

用js实现的抽象CSS圆角效果!!

Web开发
用js实现的抽象CSS圆角效果!!

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

简易实现DIV圆角的JavaScript代码

Web开发
简易实现DIV圆角的JavaScript代码

如何实现JS函数的重载

Web开发
如何实现JS函数的重载

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

javascript实现的颜色块滑动的动态效果

javascript实现的颜色块滑动的动态效果

javascript下查找父节点的简单方法

javascript下查找父节点的简单方法
下拉加载更多内容 ↓