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

2016-02-19 09:18 6 1 收藏

下面图老师小编跟大家分享一个简单易学的代码精简的可以实现元素圆角的js函数教程,get新技能是需要行动的,喜欢的朋友赶紧收藏起来学习下吧!

【 tulaoshi.com - Web开发 】

上次在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; 
       } 
}

来源:http://www.tulaoshi.com/n/20160219/1590305.html

延伸阅读
标签: Web开发
代码如下: !-- //ASP分页函数 function ShowListPage(page,Pcount,TopicNum,maxperpage,strLink,ListName){     var alertcolor = '#FF0000';     maxperpage=Math.floor(maxperpage);     TopicNum=Math.floor(TopicNum);     p...
标签: Web开发
代码如下: function SetWinHeight(obj)  {  var win=obj;  if (document.getElementById)  {     if (win && !window.opera)     {      if (win.contentDocument && win.contentDocument.body.o...
标签: Web开发
/* JavaScript Document 广告代码静态化js通用函数 原则上每个页面不应该出现域名的固定指向 */ /* Config */ var sSiteUrl = "http://www.spvjoy.com"; //var sSiteUrl = "http://192.168.1.30:82"; var sSendSite = "http://send.mmstoon.com"; var sMp3Url = "...
标签: Web开发
很多语言都有类似php中的include和require功能的函数,而唯独javascript没有。  很早就想在js中实现类似的功能,尝试了很多次都没有成功,那天在google上搜索一些关于动态加载css文件的关键词时,发现一个blog(地址找不到了)上的一个为网页的head标签增加link元素的函数,于是就改了一下,写了这个函数。  用法:  include...
标签: Web开发
有一点可以不用否认的,那就是当每个页面中中都需要调用同一个文件时,采用JS的文件会比HTML文件快,为了方便这2种代码之间的转化,网上有很多网站提供这样的服务,为了不用转化一下就网上转化,于是呼我找了个最简单的代码,可以轻松时间这2种代码之间的转变,演示地址为:http://www.bkye.com/tool/html-js.htm,如果您在看到演示后觉得还8错...

经验教程

747

收藏

83
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部